HTML DOM createElement() Method
Document ObjectExample
Create a <button> element:
var btn = document.createElement("BUTTON");
The result will be:
Try it Yourself »
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>
The result will be:
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 »
