Método insertBefore() del elemento HTML DOM Element

Definición y uso

insertBefore() El método inserta un nodo antes de un nodo existente.

Vea también:

Método appendChild()

Método replaceChild()

Método removeChild()

Método remove()

Atributo childNodes

Atributo firstChild

Atributo lastChild

Atributo firstElementChild

Atributo lastElementChild

Ejemplo

Ejemplo 1

  1. Crear un elemento <li>
  2. Crear un nodo de texto
  3. Adjuntar texto al elemento <li>
  4. Insertar el elemento <li> antes del primer elemento hijo de <ul>
const newNode = document.createElement("li");
const textNode = document.createTextNode("Agua");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

Prueba por tu cuenta

Ejemplo 2

Mover el último elemento de una lista al principio de otra lista:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);

Prueba por tu cuenta

Ejemplo 3

Mover el último elemento de una lista a la parte final de otra lista:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, null);

Prueba por tu cuenta

Sintaxis

element.insertBefore(newnode, existingnode)

o

node.insertBefore(newnode, existingnode)

Parámetros

Parámetros Descripción
newnode Obligatorio. Nodo a insertar (elemento).
existingnode

Opcional. Insertar un nodo hijo antes del nuevo nodo.

Si no se especifica, el método insertBefore insertará newnode al final.

Valor devuelto

Tipo Descripción
Nodo Nodo insertado.

Compatibilidad del navegador

element.insertBefore() Es una característica del Nivel 1 de DOM (1998).

Todos los navegadores lo soportan completamente:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte 9-11 Soporte Soporte Soporte Soporte