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.

Crea un elemento del DOM con el espacio de nombres URI y un nombre calificado.

Para crear un elemento sin especificar un espacio de nombre URI usa el método createElement.

Sintaxis

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

Parámetros

namespaceURI

String que especifica el namespace URI a asociar con el elemento. La propiedad namespaceURI del elemento creado es inicializada con el valor del namespaceURI. Ver Namespace URIs válidos.

qualifiedName

String que especifica el tipo del elemento a ser creado. La propiedad nodeName del elemento creado es inicializada con el valor qualifiedName.

optionsOpcional

Un objeto opcional ElementCreationOptions que contiene una sola propiedad llamada is, cuyo valor es el nombre de la etiqueta para un elemento personalizado previamente definido usando customElements.define(). Para retro compatibilidad con versiones previas de la Especificación de Elementos Personalizados, algunos navegadores te permitirán pasar un String aquí en lugar de un Objeto, donde el valor del String es el nombre de la etiqueta del elemento personalizado. Ver Extendiendo elementos HTML nativos para más información sobre como usar este parámetro.

Al nuevo elemento le será dado un atributo is cuyo valor es el nombre de la etiqueta del elemento personalizado. Los elementos personalizados son una característica experimental disponible solo en algunos navegadores.

Valor de Retorno

El nuevo Elemento.

Namespace URIs válidos

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

Ejemplo

El código siguiente crea un elemento <div> nuevo en el namespace XHTML y lo agrega al elemento vbox. Aunque no es un documento XUL extremamente útil esto demuestra el uso de los elementos de dos namespaces distintos dentro de un solo documento:

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="||Trabajando con elementos||"
      onload="init()">

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

 function init(){
   container = document.getElementById("ContainerBox");
   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
   txtnode = document.createTextNode("Este es el texto que fue construido dinámicamente con createElementNS y createTextNode y luego insertado dentro del documento usando appendChild.");
   newdiv.appendChild(txtnode);
   container.appendChild(newdiv);
 }

]]></script>

 <vbox id='ContainerBox' flex='1'>
  <html:div>
   El script en esta página agregará contenido dinámico debajo:
  </html:div>
 </vbox>

</page>

Nota: El ejemplo dado arriba usa script en linea lo cúal no es recomendable en documentos XHTML. Este ejemplo en particular es un documento XUL con XHTML embedido, de cualquier forma la recomendación aplica.

Especificaciones

Specification
DOM Standard
# ref-for-dom-document-createelementns①

Compatibilidad del Navegador

BCD tables only load in the browser

Ver también