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 July 2015.

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

Exemplo

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.

Especificação

Veja também