In an HTML document, the Document.createElement() method creates the specified HTML element or an HTMLUnknownElement if the given element name isn't a known one.

In a XUL document, it creates the specified XUL element.

In other documents, it creates an element with a null namespace URI.

Syntax

var element = document.createElement(tagName);
  • element is the created Element object.
  • tagName is a string that specifies the type of element to be created. The nodeName of the created element is initialized with the value of tagName. Don't use qualified names (like "html:a") with this method.

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); 
}


 

Notes

  • When called on a document object flagged as an HTML document, createElement() lower-cases its argument prior to creating the element.
  • To create an element with a qualified name and namespace URI, use document.createElementNS() instead.
  • Prior to Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), you could include angled brackets (< and >) around the tagName in quirks mode; starting in Gecko 2.0, the function behaves the same way in both quirks mode and standards mode.
  • Starting with Gecko 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16) createElement(null) works like createElement("null"). Note that Opera stringifies null as well, but Chrome and Internet Explorer will both throw errors.
  • 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".
  • 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.

Specifications

See also

Document Tags and Contributors

Tags: 
 Contributors to this page: madarche, teoli, karbassi, Strilanc, Sheppy, FineTralfazz, Velmurugan, frd, MHasan, edendramis, Delapouite, goetz, RUJordan, kscarfone, Navin_Jadhav, wsh91, Bzbarsky, fscholz, ethertank, paul.irish, f0x, mohamad kmail, Nickolay, Crash, Jürgen Jeka, Hsivonen, Matej Lednar, Mgjbot, Quasiphoton, Hyeongryeol, Federico, Sebuls, Jabez, Psychopsia, Jovemsabio, Ptak82, Sp, BenoitL, Dria, JesseW
 Last updated by: madarche,