El método Node.insertBefore() 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, insertBefore() 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).

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. 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 cloneNode() no se mantendrán sincronizadas automáticamente.

Si el nodo de referencia es null, el nodo indicado se añadirá al final de la lista de hijos del nodo padre especificado.

Si el hijo proporcionado es un DocumentFragment, el contenido completo del DocumentFragment se moverá a la lista de hijos del nodo padre indicado.

Sintaxis

var insertedNode = parentNode.insertBefore(newNode, referenceNode);
  • insertedNode El nodo que esta siendo insertado, es decir, newNode
  • parentNode El padre del nodo recién insertado.
  • newNode El nodo a insertar.
  • referenceNode El nodo antes del cual se inserta newNode.

Si referenceNode es null, el newNode se insertará al final de la lista de nodos hijos.

referenceNode no es un parámetro opcional -- debes pasar explícitamente un Node o null. No proporcionándolo o pasando valores no válidos podría provocar un comportamiento distinto en diferentes versiones de navegadores.

Valor devuelto

El valor devuelto es el hijo añadido excepto cuando newNode es un DocumentFragment, en cuyo caso se devuelve un DocumentFragment.

Ejemplo

Ejemplo 1

<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>

Ejemplo 2

<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>

No existe el método insertAfter().  Puede ser emulado mediante la combinación del método con Node.nextSibling().

En el ejemplo anterior, sp1 podría insertarse después de sp2 usando:

parentDiv.insertBefore(sp1, sp2.nextSibling);

Si sp2 no tiene ningún hermano depués de él, entonces debe ser el último hijo — sp2.nextSibling devuelve null, y sp1 se inserta al final de la lista de nodos hijos (inmediatamente después de sp2).

Ejemplo 3

Inserta un elemento antes del primer elemento hijo, utilizando la propiedad firstChild.

// 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);

Cuando el elemento no tiene ub primer hijo, entonces firstChild es null. 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.

Compatibilidad en navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
insertBeforeChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 3IE Soporte completo 9Opera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo 1Chrome Android Soporte completo 18Edge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibility unknown  
Compatibility unknown

Especificaciones

Especificación Estado Comentario
DOM
La definición de 'Node.insertBefore' en esta especificación.
Living Standard Corrige errores en el algoritmo de inserción
DOM4
La definición de 'Node.insertBefore' en esta especificación.
Obsolete Describe el algoritmo con mayor detalle
Document Object Model (DOM) Level 3 Core Specification
La definición de 'Node.insertBefore' en esta especificación.
Obsolete Sin cambios notables
Document Object Model (DOM) Level 2 Core Specification
La definición de 'Node.insertBefore' en esta especificación.
Obsolete Sin cambios notables
Document Object Model (DOM) Level 1 Specification
La definición de 'Node.insertBefore' en esta especificación.
Obsolete Introducido

Ver también

Etiquetas y colaboradores del documento

Etiquetas: 
Colaboradores en esta página: mdnwebdocs-bot, AlePerez92, danvao, Sedoy, carpasse
Última actualización por: mdnwebdocs-bot,