diff options
Diffstat (limited to 'files/es/web/api/document/createelement/index.html')
| -rw-r--r-- | files/es/web/api/document/createelement/index.html | 180 |
1 files changed, 180 insertions, 0 deletions
diff --git a/files/es/web/api/document/createelement/index.html b/files/es/web/api/document/createelement/index.html new file mode 100644 index 0000000000..cb7b3d175b --- /dev/null +++ b/files/es/web/api/document/createelement/index.html @@ -0,0 +1,180 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Documento + - Referencia + - metodo +translation_of: Web/API/Document/createElement +--- +<div>{{APIRef("DOM")}}</div> + +<p>En un documento <a href="/en-US/docs/Web/HTML">HTML</a>, el método <strong><code>Document.createElement()</code></strong> crea un elemento HTML especificado por su <code>tagName</code>, o un {{domxref("HTMLUnknownElement")}} si su <code>tagName</code> no se reconoce. En un documento <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, crea el elemento XUL especificado. En otros documentos, crea un elemento con un namespace URI <code>null</code>.</p> + +<p>Para declarar el namespace URI del elemento, utiliza <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS" title="Creates an element with the specified namespace URI and qualified name."><code>document.createElementNS()</code></a>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: js"><var>var <em>element</em></var> = <var>document</var>.createElement(<em><var>tagName, [options]</var></em>); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>tagName</code></dt> +</dl> + +<p>Cadena que especifica el tipo de elemento a crear. El {{domxref("Node.nodeName", "nodeName")}} del elemento creado se inicializa con el valor de <code>tagName</code>. No utilizar nombres reservados (como "html:a") con este método. Al ser invocado en un documento HTML, <code>createElement()</code> convierte <code>tagName</code> a minúsculas antes de crear el elemento. En Firefox, Opera, y Chrome, <code>createElement(null)</code> funciona como <code>createElement("null")</code>.</p> + +<dl> + <dt><code>options</code>{{optional_inline}}</dt> + <dd>Un objeto opcional <code>ElementCreationOptions</code> que contiene una única propiedad llamada <code>is</code>, cuyo valor es el de la etiqueta name de un elemento personalizado definido previamente utilizando <code>customElements.define()</code>. Para compatibilidad con versiones anteriores de<a href="https://www.w3.org/TR/custom-elements/"> Elements specification</a>, algunos navegadores podrían permitir pasar una cadena aquí en vez de un objeto, donde el valor de la cadena es la etiqueta name del elemento creado. Ver <a href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a> para más información sobre como usar este parámetro.</dd> + <dd>El nuevo elemento recibirá el atributo cuyo valor es la etiqueta name del elemento personalizado. Los elementos personalizados son una característica experimental solo disponible en algunos navegadores.</dd> +</dl> + +<h3 id="Retorna">Retorna</h3> + +<p>El nuevo <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" title="The Element interface represents an object of a Document. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality."><code>Element</code></a>.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Crea un nuevo <code><div></code> y lo inserta antes del elemento con ID "<code>div1</code>".</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><!DOCTYPE html> +<html> +<head> + <title>||Trabajando con elementos||</title> +</head> +<body> + <div id="div1">El texto superior se ha creado dinámicamente.</div> +</body> +</html> +</pre> + +<h3 id="JavaScript"><span style="line-height: normal;">JavaScript</span></h3> + +<pre class="brush:js">document.body.onload = addElement; + +function addElement () { + // crea un nuevo div + // y añade contenido + var newDiv = document.createElement("div"); + var newContent = document.createTextNode("Hola!¿Qué tal?"); + newDiv.appendChild(newContent); //añade texto al div creado. + + // añade el elemento creado y su contenido al DOM + var currentDiv = document.getElementById("div1"); + document.body.insertBefore(newDiv, currentDiv); +}</pre> + +<p>{{EmbedLiveSample("Example", 500, 50)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-document-createelement", "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>Característica</th> + <th>Chrome</th> + <th>Edge</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}}<sup>[1][2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Parámetro <code>options</code></td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(50)}}<sup>[4][5]</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>Característica</th> + <th>Android</th> + <th>Edge</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> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Desde Gecko 22.0 {{geckoRelease("22.0")}} <code>createElement()</code> no utiliza {{domxref("HTMLSpanElement")}} interface cuando el argumento es "bgsounds", "multicol", o "image". En cambio, <code>HTMLUnknownElement</code> se utiliza para "bgsound" y "multicol" y {{domxref("HTMLElement")}} <code>HTMLElement</code> se utiliza para "image".</p> + +<p>[2] La implementación en Gecko de <code>createElement</code> no cumple la especificación DOM para documentos XUL y XHTML: <code>localName</code> y <code>namespaceURI</code> no son inicializados como <code>null </code>en el elemento creado. Consúltese el {{ Bug(280692) }} para más información.</p> + +<p>[3] En versiones anteriores de la especificación, este argumento era solamente una cadena cuyo valor era la etiqueta <code>name</code> del elemento personalizado. Por ejemplo: Podia recibir <code>document.createElement("button", "mi-boton")</code> en lugar de <code>document.createElement("button", {id: "mi-boton"})</code>. Por razones de compatibilidad, Chrome acepta ambas formas.</p> + +<p>[4] Consultar [3] arriba: como Chrome, Firefox acepta una cadena en vez de un objeto en esta posición, pero solamente desde la versión 51 en adelante. En la versión 50, <code>options</code> debe ser un objeto.</p> + +<p>[5] Para experimentar con elementos personalizados<code> </code>en Firefox, deben establecerse las preferencias <code>dom.webcomponents.enabled</code> y <code>dom.webcomponents.customelements.enabled </code>a <code>true</code>.</p> + +<h3 id="Notas_de_CSS_Quantum">Notas de CSS Quantum</h3> + +<ul> + <li>En Gecko, cuando creas un subarbol separado (por ejemplo, un {{htmlelement("div")}} creado usando <code><strong>createElement()</strong></code> que aún no ha sido insertado en el DOM), el elemento raíz del subarbol es insertado como un elemento "block". En el nuevo motor paralelo de CSS de Firefox (tambien conocido como <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> o <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planeado para ser publicado en Firefox 57), el elemento es insertado como "inline", según se especifica en {{bug(1374994)}}.</li> +</ul> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> +</ul> |