Document.createElementNS()

Creates an element with the specified namespace URI and qualified name.

To create an element without specifying a namespace URI, use the createElement() method.

Syntax

var element = document.createElementNS(namespaceURI, qualifiedName[, options]);

Parameters

namespaceURI
A string that specifies the namespace URI to associate with the element. The namespaceURI property of the created element is initialized with the value of namespaceURI. See Valid Namespace URIs.
qualifiedName
A string that specifies the type of element to be created. The nodeName property of the created element is initialized with the value of qualifiedName.
optionsOptional
An optional ElementCreationOptions object containing a single property named is, whose value is the tag name for a custom element previously defined using customElements.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 is attribute 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.

Important Namespace URIs

HTML
http://www.w3.org/1999/xhtml
SVG
http://www.w3.org/2000/svg
MathML
http://www.w3.org/1998/Math/MathML
XUL 
http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
XBL   
http://www.mozilla.org/xbl

Example

This creates a new <div> element in the XHTML namespace and appends it to the vbox element. Although this is not an extremely useful XUL document, it does demonstrate the use of elements from two different namespaces within a single document:

<?xml version="1.0"?>
<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
      xmlns:html="http://www.w3.org/1999/xhtml"
      title="||Working with elements||"
      onload="init()">

<script type="application/javascript"><![CDATA[
 let container;
 let newdiv;
 let txtnode;

 function init(){
   container = document.getElementById("ContainerBox");
   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml", "div");
   txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
   newdiv.appendChild(txtnode);
   container.appendChild(newdiv);
 }

]]></script>

 <vbox id="ContainerBox" flex="1">
  <html:div>
   The script on this page will add dynamic content below:
  </html:div>
 </vbox>

</page>

The example given above uses inline script which is not recommended in XHTML documents. This particular example is actually an XUL document with embedded XHTML, however, the recommendation still applies.

Specifications

Specification Status Comment
DOM
The definition of 'Document.createElementNS()' in that specification.
Living Standard

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
createElementNSChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Doesn't conform to the DOM spec for XUL and XHTML documents: localName and namespaceURI are not set to null on the created element.
IE Full support 9Opera Full support ≤12.1Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support ≤12.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
options parameterChrome Full support 56
Notes
Full support 56
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Edge Full support ≤79
Notes
Full support ≤79
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Firefox Full support 50
Notes
Full support 50
Notes
Notes Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.
IE ? Opera Full support 43
Notes
Full support 43
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Safari ? WebView Android Full support 56
Notes
Full support 56
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Chrome Android Full support 56
Notes
Full support 56
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Firefox Android Full support 50
Notes
Full support 50
Notes
Notes Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.
Opera Android Full support 43
Notes
Full support 43
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Safari iOS ? Samsung Internet Android Full support 6.0
Notes
Full support 6.0
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

See also