Node.insertBefore

Resumo

Adiciona o nó especificado, antes de um elemento de referência, como filho do nó atual.

Sintaxe

var elementoInserido = elementoPai.insertBefore(novoElemento, elementoDeReferencia);

Se elementoDeReferencia for null, novoElemento será inserido no fim da lista de nós filhos.

  • elementoInserido O nó sendo inserido, que é novoElemento
  • elementoPai Pai do nó recentemente inserido.
  • novoElemento O nó a ser inserido.
  • elementoDeReferencia O nó antes do qual o novoElemento será inserido.

Exemplo

<div id="elementoPai">
  <span id="elementoFilho">foo bar</span>
</div>

<script>
// Cria um novo elemento <span> vazio
var sp1 = document.createElement("span");

// Guarda a referência do elemento atraś do qual nos queremos inserir o novo elemento
var sp2 = document.getElementById("elementoFilho");
// Guarda a referência do elemento pai
var divPai = sp2.parentNode;

// Insere o novo elemento no DOM antes de sp2
divPai.insertBefore(sp1, sp2);
</script>

Não existe um método insertAfter. Mas ele pode ser emulado combinando o método insertBefore com nextSibling.

No exemplo anterior, sp1 poderia ser inserido após sp2 desta forma:

divPai.insertBefore(sp1, sp2.nextSibling);

Se sp2 não possuir um próximo nó, significa que ele deve ser o último filho — sp2.nextSibling retorna null, e sp1 é inserido ao fim da  da lista de nós filhos (logo após sp2).

Exemplo 2

Inserir um elemento antes do primeiro nó filho, usando a propriedade firstChild.

// Guarda a referêncis do elemento no quela nóe queremos inserir o novo nó
var elementoPai = document.getElementById('elementoPai');
// Guarda a referência do primeiro filho
var primeiroFilho = elementoPai.firstChild;

// Cria um novo elemento
var novoElemento = document.createElement("div");

// Insere o novo elemento antes do primeiro filho
elementoPai.insertBefore(novoElemento, primeiroFilho);

Quando o elemento não possui o primeiro filho, então firstChild é null. O elemento ainda será inserido no pai, mas após o último filho. Pois se o elemento pai não possui primeiro filho, ele também não possui o último filho. Conseqüentemente, o novo elemento será o único elemento após a inserção.

Compatibilidade de navegadores

Funcionalidade Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte básico 1.0 (Yes) (Yes) (Yes) (Yes)
Funcionalidade Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico ? ? ? ? ?

Especificação

Etiquetas do documento e colaboradores

 Colaboradores desta página: debone, teoli, khalid32, reniesiqueira
 Última atualização por: debone,