O métodoNode.insertBefore() insere um nó antes do nó de referência como um filho de um nó pai especificado. Se o filho especificado for uma referência a um nó existente no documento,insertBefore() o moverá de sua posição atual para a nova posição (não há necessidade de remover o nó de seu nó pai antes de anexá-lo a outro nó).

Isso significa que um nó não pode estar em dois pontos do documento simultaneamente. Portanto, se o nó já tiver um pai, o nó será removido pela primeira vez e inserido na nova posição. ONode.cloneNode() pode ser usado para fazer uma cópia do nó antes de anexá-lo ao novo pai. Note que as cópias feitas comcloneNode() não serão automaticamente mantidas em sincronia.

Se o nó de referência fornull, o nó especificado será incluído no final da lista de filhos do nó pai especificado.

Se o filho especificado for umDocumentFragment, todo o conteúdo doDocumentFragment será movido para a lista de filhos do nó pai especificado.

Sintaxe

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

• 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 onovoElemento será inserido.

SeelementoDeReferencia fornull,novoElemento será inserido no fim da lista de nós filhos.

Return value

O valor retornado é o filho incluído, exceto quandonewNode é umDocumentFragment, caso em que oDocumentFragment vazio é retornado.

Exemplo

<div>  <span>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étodoinsertAfter. Mas ele pode ser emulado combinando o métodoinsertBefore comnextSibling.

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

divPai.insertBefore(sp1, sp2.nextSibling);

Sesp2 não possuir um próximo nó, significa que ele deve ser o último filho —sp2.nextSibling retornanull, esp1 é 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 propriedadefirstChild.

// 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 filhovar primeiroFilho = elementoPai.firstChild;// Cria um novo elementovar novoElemento = document.createElement("div");// Insere o novo elemento antes do primeiro filhoelementoPai.insertBefore(novoElemento, primeiroFilho);

Quando o elemento não possui o primeiro filho, entãofirstChild é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.

Especificações

Compatibilidade com navegadores