In an HTML document, the Document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized. In a XUL document, it creates the specified XUL element. In other documents, it creates an element with a null namespace URI.
To explicitly specify the namespace URI for the element, use document.createElementNS().
Syntax
var element = document.createElement(tagName[, options]);
Parameters
tagName- A string that specifies the type of element to be created. The
nodeNameof the created element is initialized with the value oftagName. Don't use qualified names (like "html:a") with this method. When called on an HTML document,createElement()convertstagNameto lower case before creating the element. In Firefox, Opera, and Chrome,createElement(null)works likecreateElement("null"). optionsOptional- An optional
ElementCreationOptionsobject containing a single property namedis, whose value is the tag name for a custom element previously defined usingcustomElements.define(). For backwards compatibility with previous versions of the Custom Elements specification, some browsers will allow you to pass a string here instead of an object, where the string's value is the custom element's tag name. See Extending native HTML elements for more information on how to use this parameter. - The new element will be given an
isattribute whose value is the custom element's tag name. Custom elements are an experimental feature only available in some browsers.
Return value
The new Element.
Example
This creates a new <div> and inserts it before the element with the ID "div1".
HTML
<!DOCTYPE html> <html> <head> <title>||Working with elements||</title> </head> <body> <div id="div1">The text above has been created dynamically.</div> </body> </html>
JavaScript
document.body.onload = addElement;
function addElement () {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hi there and greetings!");
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}
Specifications
| Specification | Status | Comment |
|---|---|---|
| DOM The definition of 'Document.createElement' in that specification. |
Living Standard |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes)[1][2] | (Yes) | (Yes) | (Yes) |
options argument |
(Yes)[3] | ? | 50 (50)[4][5] | ? | ? | ? |
| Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
options argument |
(Yes) | (Yes)[3] | ? | ? | ? | ? | ? | (Yes)[3] |
[1] Starting with Gecko 22.0 (Firefox 22.0 / Thunderbird 22.0 / SeaMonkey 2.19) createElement() no longer uses the HTMLSpanElement interface when the argument is "bgsounds", "multicol", or "image". Instead, HTMLUnknownElement is used for "bgsound" and "multicol" and HTMLElement HTMLElement is used for "image".
[2] The Gecko implementation of createElement doesn't conform to the DOM spec for XUL and XHTML documents: localName and namespaceURI are not set to null on the created element. See bug 280692 for details.
[3] In previous versions of the specification, this argument was just a string whose value was the custom element's tag name. For example it could take document.createElement("button", "custom-button") rather than document.createElement("button", {id: "custom-button"}). For the sake of backwards compatibility, Chrome accepts both forms, though the string form is deprecated.
[4] See [3] above: like Chrome, Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.
[5] To experiment with custom elements in Firefox, you must set the dom.webcomponents.enabled and dom.webcomponents.customelements.enabled preferences to true.