Este articulo necesita una revisión editorial. Cómo puedes ayudar.
Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
Syntax
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
En mozilla Firefox, si referenceElement
es null
, newElement
se inserta al final the la lista de nodos hijos o child nodes. En Internet Explorer, un valor undefined como referenceElement, lanzará una excepción "Invalid argument", mientras que en Chrome lanzara un "Uncaught TypeError" pues espera ambos argumentos.
insertedElement
El nodo que esta siendo insertado, o seanewElement
parentElement
El padre del nodo recien insertado.newElement
El nodo a insertar.referenceElement
El nodo antes del cual se insertanewElement
.
Example
<div id="parentElement"> <span id="childElement">foo bar</span> </div> <script> // Creamos un nuevo, elemento <span> var sp1 = document.createElement("span"); // Obtenemos la referencia al elemento, antes de insertarlo var sp2 = document.getElementById("childElement"); // Obten la referencia al elemento padre var parentDiv = sp2.parentNode; // Insertamos el nuevo elemento en el DOM antes de sp2 parentDiv.insertBefore(sp1, sp2); </script>
No existe el método insertAfter
. Puede ser emulado mediante la combinacion de el método insertBefore con
nextSibling
.
En el ejemplo anterior, sp1 podría ser insertado después de sp2 usando:
parentDiv.insertBefore(sp1, sp2.nextSibling);
Si sp2
no tiene ningún hermano hermano depués de el, entonces debe ser el último hijo — sp2.nextSibling
devuelve null
, y sp1
se inserta al final de la lista de nodos (inmediatamente después de sp2
).
Example 2
Insertar un elemento antes del primer elemento hijo, usando la propiedad firstChild.
// Obtenemos la referencia del elemento al cual queremos insertar el nuevo nodo var parentElement = document.getElementById('parentElement'); // Obtenemos la referencia al primer hijo var theFirstChild = parentElement.firstChild; // Creamos el nuevo elemento var newElement = document.createElement("div"); // Insertamos el nuevo elemento antés del primer hijo parentElement.insertBefore(newElement, theFirstChild);
Cuando el elemento no tiene primer hijo, entonces firstChild
es null
. 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. Así pues, el nuevo elemento es el único elemento despues de ser insertado.
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |