Document: createElementNS() method

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

* Some parts of this feature may have varying levels of support.

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

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

Syntax

createElementNS(namespaceURI, qualifiedName)createElementNS(namespaceURI, qualifiedName, options)

Parameters

namespaceURI

A string that specifies thenamespaceURI to associate with the element. Some important namespace URIs are:

HTML: http://www.w3.org/1999/xhtml
SVG: http://www.w3.org/2000/svg
MathML: http://www.w3.org/1998/Math/MathML

qualifiedName

A string that specifies the type of element to be created.ThenodeName property of the created element is initialized with the value ofqualifiedName.

optionsOptional

An optionalElementCreationOptions object containing a single property namedis, whose value is the tag name for a custom element previously defined usingcustomElements.define().For backwards compatibility, some browsers allow you to pass a string here instead of an object, where the string's value is the custom element's tag name.SeeExtending native HTML elements for more information on how to use this parameter.

The new element will be given anis attribute whose value is the custom element's tag name. Custom elements are an experimental feature only available in some browsers.

Return value

The newElement.

Exceptions

NamespaceErrorDOMException: Thrown if thenamespaceURI value is not a valid namespace URI.
InvalidCharacterErrorDOMException: Thrown if thequalifiedName value is not a validXML name; for example, it starts with a number, hyphen, or period, or contains characters other than alphanumeric characters, underscores, hyphens, or periods.

Examples

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

xml

<?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><![CDATA[let container;let newDiv;let textNode;function init() {  container = document.getElementById("ContainerBox");  newDiv = document.createElementNS("http://www.w3.org/1999/xhtml", "div");  textNode = document.createTextNode(    "This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.",  );  newDiv.appendChild(textNode);  container.appendChild(newDiv);}]]></script> <vbox flex="1">  <html:div>   The script on this page will add dynamic content below:  </html:div> </vbox></page>

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