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

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

Exemplo

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

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

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

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

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

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

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

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

parent.insertBefore(p, parent.firstChild);

Resultado da execução do código:

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

Veja também