Document.createElementNS()

Baseline Widely available *

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

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

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

Cria um elemento com Namespace URI e nome qualificado, como especificado.

Syntax

element = document.createElementNS(namespaceURI, qualifiedName);

element é o element criado.
namespaceURI é uma string que especifica o namespace URI para associar com o elemento. A propriedade namespaceURI do elemento criado é inicializada com os valores de namespaceURI. (Consulte seção abaixo para "Namespace URI's válidos")
qualifiedName é uma string que especifica o tipo de elemento a ser criado. A propriedade nodeName do elemento criado é inicializada com o valor de qualifiedName

Namespace URI's válidos

HTML - Use https://www.w3.org/1999/xhtml
SVG - Use https://www.w3.org/2000/svg
XBL - Use http://www.mozilla.org/xbl
XUL - Use http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul

Isso cria um novo elemento <div> no namespace XHTML e anexa ele ao elemento vbox. Embora isso não seja um documento XUL extremamente útil, pode demonstrar o uso de elementos de dois namespaces diferentes em apenas um documento:

xml

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

<script type="text/javascript"><![CDATA[
 var container;
 var newdiv;
 var txtnode;

 function init(){
   container = document.getElementById("ContainerBox");
   newdiv = document.createElementNS("https://www.w3.org/1999/xhtml","div");
   txtnode = document.createTextNode("Este é o texto construído dinâmicamente com createElementNS e createTextNode então é inserido no documento usando appendChild.");
   newdiv.appendChild(txtnode);
   container.appendChild(newdiv);
 }

]]></script>

 <vbox id='ContainerBox' flex='1'>
  <html:div>
   O script desta página irá colocar conteúdo dinâmico abaixo:
  </html:div>
 </vbox>

</page>

Notas

O exemplo dado anteriormente usa script inline que não é recomendado em documentos XHTML. Este exemplo particular é atualmente um documento XUL com XHTML incorporado, contudo, a recomendação ainda se aplica. scripts Inline não causam nenhum problema neste pequeno exemplo, contudo, para qualquer trabalho sério você precisa ler sobre Uso correto de CSS e JavaScript en documentos XHTML.

Para criar um elemento sem especificar seu namespace URI, use o método createElement.