---
title: Document.createElementNS()
slug: Web/API/Document/createElementNS
translation_of: Web/API/Document/createElementNS
---
<div>{{ApiRef("DOM")}}</div>

<p>Crea un elemento del DOM con el espacio de nombres URI y un nombre calificado.</p>

<p>Para crear un elemento sin especificar un espacio de nombre URI usa el método <a href="createElement" title="createElement">createElement</a>.</p>

<h2 id="Syntax" name="Syntax">Sintaxis</h2>

<pre class="brush: js"><var>var element</var> = <var>document</var>.createElementNS(<var>namespaceURI</var>, <var>qualifiedName</var>[, options]);
</pre>

<h3 id="Parámetros">Parámetros</h3>

<dl>
 <dt><code>namespaceURI</code></dt>
 <dd><em>String </em>que especifica el <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">namespace URI</a> a asociar con el elemento. La propiedad <a href="/en-US/docs/DOM/element.namespaceURI">namespaceURI</a> del elemento creado es inicializada con el valor del <code>namespaceURI</code>. Ver <a href="/en-US/docs/Web/API/Document/createElementNS#Valid_Namespace_URI's">Namespace URIs válidos</a>.</dd>
 <dt><code>qualifiedName</code></dt>
 <dd><em>String</em> que especifica el tipo del elemento a ser creado. La propiedad <a href="/en-US/docs/DOM/element.nodeName">nodeName</a> del elemento creado es inicializada con el valor <code>qualifiedName</code>.</dd>
 <dt><code>options</code><span class="inlineIndicator optional optionalInline">Opcional</span></dt>
 <dd>Un objeto opcional <code>ElementCreationOptions</code> que contiene una sola propiedad llamada <code>is</code>, cuyo valor es el nombre de la etiqueta para un elemento personalizado previamente definido usando <code>customElements.define()</code>. Para retro compatibilidad con versiones previas de la <a href="https://www.w3.org/TR/custom-elements/">Especificación de Elementos Personalizados</a>, algunos navegadores te permitirán pasar un <em>String</em> aquí en lugar de un <em>Objeto</em>, donde el valor del <em>String</em> es el nombre de la etiqueta del elemento personalizado. Ver <a href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extendiendo elementos HTML nativos</a> para más información sobre como usar este parámetro.</dd>
 <dd>Al nuevo elemento le será dado un atributo <code>is</code> cuyo valor es el nombre de la etiqueta del elemento personalizado. Los elementos personalizados son una característica experimental disponible solo en algunos navegadores.</dd>
</dl>

<h3 id="Valor_de_Retorno">Valor de Retorno</h3>

<p>El nuevo <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Elemento</a></code>.</p>

<h2 id="Example" name="Example">Namespace URIs válidos</h2>

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

<h2 id="Example" name="Example">Ejemplo</h2>

<p>El código siguiente crea un elemento &lt;div&gt; nuevo en el namespace <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> y lo agrega al elemento vbox. Aunque no es un documento <a href="/en-US/docs/XUL" title="XUL">XUL</a> extremamente útil esto demuestra el uso de los elementos de dos namespaces distintos dentro de un solo documento:</p>

<pre class="brush:xml">&lt;?xml version="1.0"?&gt;
&lt;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()"&gt;

&lt;script type="text/javascript"&gt;&lt;![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);
 }

]]&gt;&lt;/script&gt;

 &lt;vbox id='ContainerBox' flex='1'&gt;
  &lt;html:div&gt;
   El script en esta página agregará contenido dinámico debajo:
  &lt;/html:div&gt;
 &lt;/vbox&gt;

&lt;/page&gt;
</pre>

<div class="note">
<p>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.</p>
</div>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estatus</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Soporte</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>argumento <code>options</code> </td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatGeckoDesktop(50)}}<sup>[2][3]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Soporte</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] En versiones previas de la especificación  el argumento fue solo un String cuyo valor fue el nombre de etiqueta del elemento personalizado. Por motivo de retro compatibilidad Chrome acepta ambas formas.</p>

<p>[2] Ver [1] arriba: Firefox al igual que Chrome acepta un string en lugar de un objeto, pero solo de la version 51 en adelante. En la version 50 <code>options</code> debe ser un objeto.</p>

<p>[3] Para experimentar con elementos personalizados en Firefox debes establecer las preferencias  <code>dom.webcomponents.enabled</code> y <code>dom.webcomponents.customelements.enabled</code> como <code>true</code>.</p>

<h2 id="See_also" name="See_also">Ver también</h2>

<ul>
 <li><a href="createElement">document.createElement</a></li>
 <li><a href="createTextNode">document.createTextNode</a></li>
 <li><a href="../Node/namespaceURI">Node.namespaceURI</a></li>
 <li><a class="external" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a></li>
</ul>