{{ ApiRef() }}
Insere um nó filho ao nó atual, antes de um determinado elemento.
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 é o newElementparentElement é o elemento pai que receberá o novo nó inserido.newElement é o novo elemento que será inseridoreferenceElement o novo nó ficará antes desse elementoSe referenceElement é null o elemento é inserido em último lugar na lista de nós filhos. Ver childNodes
<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
{{ languages( { "en": "en/DOM/element.insertBefore", "pl": "pl/DOM/element.insertBefore", "fr": "fr/DOM/element.insertBefore" } ) }}