document.createElement

Summary

In an HTML document creates the specified HTML element or HTMLUnknownElement if the element is not known.
In a XUL document creates the specified XUL element.
In other documents creates an element with a null namespaceURI.

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 id="org_div1":

<!DOCTYPE html>
<html>
<head>
<title>||Working with elements||</title>
</head>

<body>
<div id='org_div1'> The text above has been created dynamically.</div>
</body>
<script>
document.body.onload = addElement;
var my_div = null; 
var newDiv = null; 
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 
  my_div = document.getElementById("org_div1"); 
  document.body.insertBefore(newDiv, my_div); 
} 
</script>
</html>

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 when the argument is "bgsounds", "multicol", or "image".  Instead, HTMLUnknownElement is used for "bgsound" and "multicol" and HTMLElement is used for "image".

Specifications

Hide Sidebar