HTML DOM createElement() Method

Document Object Reference Document Object

Example

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

Examples

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 »

Document Object Reference Document Object


SHARE THIS PAGE

COLOR PICKER

colorpicker