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

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

Ejemplo

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

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

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

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

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

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

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

parent.insertBefore(p, parent.firstElementChild);

Resultado de la ejecución del código:

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

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

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

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

parent.insertBefore(p, parent.firstChild);

Resultado de la ejecución del código:

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

Véase también

método prepend,
que inserta elementos al principio
método appendChild,
que inserta elementos al final del padre
método insertAdjacentElement,
que inserta un elemento en un lugar determinado
método insertAdjacentHTML,
que inserta etiquetas en un lugar determinado