Método insertBefore

O método insertBefore permite inserir um elemento antes de outro elemento. É mais comumente usado após criar um elemento com createElement. O método é aplicado ao pai do elemento antes do qual a inserção ocorrerá.

Sintaxe

pai.insertBefore(elemento, antes de quem inserir);

Exemplo

Vamos criar um parágrafo e colocá-lo antes do segundo parágrafo:

<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 da execução do código:

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

Exemplo

Vamos adicionar um parágrafo no início do elemento #parent. Para isso, vamos inserir nosso parágrafo antes do primeiro filho #parent. Esse filho pode ser encontrado 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 da execução do código:

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

Exemplo

Ao passar o segundo parâmetro como null, o método insertBefore funciona como appendChild. Ao mesmo tempo, se o elemento não tiver elementos filhos, firstElementChild retorna null. Consequentemente, é possível adicionar no início do elemento mesmo quando ele não tem elementos filhos:

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

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

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

parent.insertBefore(p, parent.firstChild);

Resultado da execução do código:

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

Veja também

método prepend,
que insere elementos no início
método appendChild,
que insere elementos no final do pai
método insertAdjacentElement,
que insere um elemento em um local especificado
método insertAdjacentHTML,
que insere tags em um local especificado