Método insertBefore

El método insertBefore permite insertar un elemento antes de otro elemento. Se utiliza con mayor frecuencia después de crear un elemento con createElement. El método se aplica al padre del elemento antes del cual se realizará la inserción.

Sintaxis

javascriptpadre.insertBefore(elemento, antes de quién insertar);

Ejemplo

Creemos un párrafo y coloquémoslo antes del segundo párrafo:

html<div id="parent">
  <p>elem 1</p>
  <p id="before">elem 2</p>
  <p>elem 3</p>
</div>

javascriptlet parent = document.querySelector('#parent');
let before = document.querySelector('#before');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, before);

Resultado de la ejecución del código:

html<div id="parent">
  <p>elem 1</p>
  <p>!</p>
  <p>elem 2</p>
  <p>elem 3</p>
</div>

Ejemplo

Añadamos un párrafo al principio del elemento #parent. Para ello, insertaremos nuestro párrafo antes del primer hijo de #parent. Este hijo puede encontrarse usando firstElementChild:

html<div id="parent">
  <p>elem 1</p>
  <p>elem 2</p>
</div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstElementChild);

Resultado de la ejecución del código:

html<div id="parent">
  <p>!</p>
  <p>elem 1</p>
  <p>elem 2</p>
</div>

Ejemplo

Al pasar como segundo parámetro null, el método insertBefore funciona como appendChild. Al mismo tiempo, si el elemento no tiene elementos hijos, firstElementChild devuelve null. En consecuencia, es posible añadir al principio del elemento incluso cuando no tiene elementos hijos:

html<div id="parent"></div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstChild);

Resultado de la ejecución del código:

html<div id="parent">
  <p>!</p>
</div>

Véase también