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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
---
title: Node.insertBefore()
slug: Web/API/Node/insertarAntes
tags:
- API
- DOM
- Nodo
- Referencia
- metodo
translation_of: Web/API/Node/insertBefore
---
<div>{{APIRef("DOM")}}</div>
<p>El método <strong><code>Node.insertBefore()</code></strong> inserta un nodo antes del nodo de referencia como hijo de un nodo padre indicado. Si el nodo hijo es una referencia a un nodo ya existente en el documento, <code>insertBefore()</code> lo mueve de la posición actual a la nueva posición (no hay necesidad de eliminar el nodo de su nodo padre antes de agregarlo al algún nodo nuevo).</p>
<p>Esto significa que el nodo no puede estar en dos puntos del documento al simultáneamente. Por lo que si el nodo ya tiene un padre, primero se elimina el nodo, y luego se inserta en la nueva posición. {{domxref("Node.cloneNode()")}} puede utilizarse para hacer una copia de un nodo antes de insertarlo en un nuevo padre. Ten en cuenta que las copias hechas con <code>cloneNode()</code> no se mantendrán sincronizadas automáticamente.</p>
<p>Si el nodo de referencia es <code>null</code>, el nodo indicado se añadirá al final de la lista de hijos del nodo padre especificado.</p>
<p>Si el hijo proporcionado es un {{domxref("DocumentFragment")}}, el contenido completo del <code>DocumentFragment</code> se moverá a la lista de hijos del nodo padre indicado.</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">var <em>insertedNode</em> = <em>parentNode</em>.insertBefore(<em>newNode</em>, <em>referenceNode</em>);
</pre>
<ul>
<li><code>insertedNode</code> El nodo que esta siendo insertado, es decir, <code>newNode</code></li>
<li><code>parentNode</code> El padre del nodo recién insertado.</li>
<li><code>newNode</code> El nodo a insertar.</li>
<li><code>referenceNode</code> El nodo antes del cual se inserta <code>newNode</code>.</li>
</ul>
<p>Si <code>referenceNode</code> es <code>null</code>, el <code>newNode</code> se insertará al final de la lista de nodos hijos.</p>
<div class="note">
<p><code>referenceNode</code> <strong>no</strong> es un parámetro opcional -- debes pasar explícitamente un <code>Node</code> o <code>null</code>. No proporcionándolo o pasando valores no válidos podría provocar un <a href="https://code.google.com/p/chromium/issues/detail?id=419780">comportamiento</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119489">distinto</a> en diferentes versiones de navegadores.</p>
</div>
<h3 id="Valor_devuelto">Valor devuelto</h3>
<p>El valor devuelto es el hijo añadido excepto cuando <code>newNode</code> es un {{domxref("DocumentFragment")}}, en cuyo caso se devuelve un {{domxref("DocumentFragment")}}.</p>
<h2 id="Ejemplo">Ejemplo</h2>
<h3 id="Ejemplo_1">Ejemplo 1</h3>
<pre class="brush: html"><div id="parentElement">
<span id="childElement">foo bar</span>
</div>
<script>
// Crear el nodo a insertar
var newNode = document.createElement("span");
// Obtener una referencia al nodo padre
var parentDiv = document.getElementById("childElement").parentNode;
// Comienzo del test [ 1 ] : Existe un childElement --> Todo funciona correctamente
var sp2 = document.getElementById("childElement");
parentDiv.insertBefore(newNode, sp2);
// Fin del test [ 1 ]
// Comienzo del test [ 2 ] : childElement no es del tipo undefined
var sp2 = undefined; // No existe un nodo con id "childElement"
parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
// Fin del test [ 2 ]
// Comienzo del test [ 3 ] : childElement es de Tipo "undefined" ( string )
var sp2 = "undefined"; // No existe un nodo con id "childElement"
parentDiv.insertBefore(newNode, sp2); // Genera "Type Error: Invalid Argument"
// Fin del test [ 3 ]
</script>
</pre>
<h3 id="Ejemplo_2">Ejemplo 2</h3>
<pre class="brush:html"><div id="parentElement">
<span id="childElement">foo bar</span>
</div>
<script>
// Crea un nuevo, elemento <span>
var sp1 = document.createElement("span");
// Obtener una referencia al elemento, antes de donde queremos insertar el elemento
var sp2 = document.getElementById("childElement");
// Obtener una referencia al nodo padre
var parentDiv = sp2.parentNode;
// Inserta un nuevo elemento en el DOM antes de sp2
parentDiv.insertBefore(sp1, sp2);
</script>
</pre>
<p>No existe el método <code>insertAfter()</code>. Puede ser emulado mediante la combinación del método con {{domxref("Node.nextSibling()")}}.</p>
<p>En el ejemplo anterior, <code>sp1</code> podría insertarse después de <code>sp2</code> usando:</p>
<pre class="brush: js"><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre>
<p>Si <code>sp2</code> no tiene ningún hermano depués de él, entonces debe ser el último hijo — <code>sp2.nextSibling</code> devuelve <code>null</code>, y <code>sp1</code> se inserta al final de la lista de nodos hijos (inmediatamente después de <code>sp2</code>).</p>
<h3 id="Ejemplo_3">Ejemplo 3</h3>
<p>Inserta un elemento antes del primer elemento hijo, utilizando la propiedad <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a>.</p>
<pre class="brush:js">// Obtener una referencia al elemento en el que se quiere insertar un nuevo nodo
var parentElement = document.getElementById('parentElement');
// Obtener una referencia al primer hijo
var theFirstChild = parentElement.firstChild;
// Crear un nuevo elemento
var newElement = document.createElement("div");
// Insertar el nuevo elemento antes que el primer hijo
parentElement.insertBefore(newElement, theFirstChild);
</pre>
<p>Cuando el elemento no tiene ub primer hijo, entonces <code style="font-style: normal; line-height: 1.5;">firstChild</code><span style="line-height: 1.5;"> es </span><code style="font-style: normal; line-height: 1.5;">null</code><span style="line-height: 1.5;">. Aun así, el elemento se añade al padre después del último hijo. Puesto que el elemento padre no tenía primer hijo, tampoco tiene último hijo. Por tanto, el nuevo elemento es el único elemento después de ser insertado.</span></p>
<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
<p>{{Compat("api.Node.insertBefore")}}</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="spectable 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-node-insertbefore','Node.insertBefore')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Corrige errores en el algoritmo de inserción</td>
</tr>
<tr>
<td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td>
<td>{{Spec2('DOM4')}}</td>
<td>Describe el algoritmo con mayor detalle</td>
</tr>
<tr>
<td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
<td>{{Spec2('DOM3 Core')}}</td>
<td>Sin cambios notables</td>
</tr>
<tr>
<td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
<td>{{Spec2('DOM2 Core')}}</td>
<td>Sin cambios notables</td>
</tr>
<tr>
<td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td>
<td>{{Spec2('DOM1')}}</td>
<td>Introducido</td>
</tr>
</tbody>
</table>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>{{domxref("Node.removeChild()")}}</li>
<li>{{domxref("Node.replaceChild()")}}</li>
<li>{{domxref("Node.appendChild()")}}</li>
<li>{{domxref("Node.hasChildNodes()")}}</li>
<li>{{domxref("Element.insertAdjacentElement()")}}</li>
<li>{{domxref("ParentNode.prepend()")}}</li>
</ul>
|
