Sumário
Insere um nó filho ao nó atual, antes de um determinado elemento.
Síntaxe
varinsertedElement =parentElement.insertBefore(newElement,referenceElement)
If referenceElement is null, newElement is inserted at the end of the list of child nodes.
insertedElementé o novo inserido,ou seja é onewElementparentElementé o elemento pai que receberá o novo nó inserido.newElementé o novo elemento que será inseridoreferenceElemento novo nó ficará antes desse elemento
Se referenceElement é null o elemento é inserido em último lugar na lista de nós filhos. Ver childNodes
Exemplo
<html>
<head>
<title>Gecko DOM insertBefore test</title>
</head>
<body>
<div>
<span id="childSpan">foo bar</span>
</div>
<script type="text/javascript">
// cria um elemento vazio
// sem ID ou qualquer outro atributo
var sp1 = document.createElement("span");
// atribui o ID 'newSpan' para o elemento criado
sp1.setAttribute("id", "newSpan");
//cria um conteudo para o novo elemento,um texto curto
var sp1_content = document.createTextNode("This is a new span element. ");
// adiciona o conteúdo a novo elemento
sp1.appendChild(sp1_content);
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;
// insere o novo elemento antes sp2
parentDiv.insertBefore(sp1, sp2);
</script>
</body>
</html>
Não há um método insertAfter(insere depois), porém pode se obter um resultado semelhante usando a combinação entre insertBefore e nextSibling. Por exemplo, sp1 pode inserido depois de sp2 usando comando parentDiv.insertBefore(sp1, sp2.nextSibling); Se a propridade nextSibling retornar null indica que o elemento é o último nó filho, logo novo elemento será incluído no final da lista de nós filhos