1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
---
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>
{{Compat("api.Document.createElement")}}
<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>
|
