Document.createElement()

 

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

JavaScript
<var>var element</var> = <var>document</var>.createElement(<var>tagName[, options]</var>);
  • 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.
  • options is an optional ElementCreationOptions object. If this object is defined and has an is property, the is attribute of the created element is initalized with the value of this property. If the object has no is property, the value is null.

Example

This creates a new <div> and inserts it before the element with the ID "div1".

HTML

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

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.
  • The is attribute is part of the Custom Elements W3C Working Draft and is an experimental feature only available in some browsers.

Specifications

See also

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/document/createelement

API Document DOM Method Reference Référence