HTML DOM createElement() Method
HTML elements often contains text. To create a button with text you must also create a Text Node which you append to the <button> element:
Example
Create a button with text:
var btn = document.createElement("BUTTON"); // Create a <button> element
var t = document.createTextNode("CLICK ME"); // Create a text node
btn.appendChild(t); // Append the text to <button>
document.body.appendChild(btn); // Append <button> to <body>
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The createElement() method creates an Element Node with the specified name.
Tip: Use the createTextNode() method to create a text node.
Tip: After the element is created, use the element.appendChild() or element.insertBefore() method to insert it to the document.
Browser Support
| Method | |||||
|---|---|---|---|---|---|
| createElement() | Yes | Yes | Yes | Yes | Yes |
Syntax
document.createElement(nodename)
Parameter Values
| Parameter | Type | Description |
|---|---|---|
| nodename | String | Required. The name of the element you want to create |
Technical Details
| Return Value: | An Element object, which represents the created Element node |
|---|---|
| DOM Version: | Core Level 1 Document Object |
More Examples
Example
Create a <p> element with some text, and append it to the document:
var para = document.createElement("P"); // Create a <p> element
var t = document.createTextNode("This is a paragraph"); // Create a text node
para.appendChild(t); // Append the text to <p>
document.body.appendChild(para); // Append <p> to <body>
Try it Yourself »
Example
Create a <p> element and append it to a <div> element:
var para = document.createElement("P"); // Create a <p> element
var t = document.createTextNode("This is a paragraph."); // Create a text node
para.appendChild(t); // Append the text to <p>
document.getElementById("myDIV").appendChild(para); // Append <p> to <div> with id="myDIV"
Try it Yourself »
