Skip to main content

Visit Mozilla.org

DOM:element.insertBefore

De MDC

« Referência do DOM Gecko

Tabela de conteúdo

[editar] Sumário

Insere um nó filho ao nó atual, antes de um determinado elemento.

[editar] Síntaxe 

var insertedElement = 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 newElement
  • parentElement é o elemento pai que receberá o novo nó inserido.
  • newElement é o novo elemento que será inserido
  • referenceElement o novo nó ficará antes desse elemento

Se referenceElement é null o elemento é inserido em último lugar na lista de nós filhos. Ver childNodes

[editar] 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


[editar] Espeficação

insertBefore

Retirado de "http://developer.mozilla.org/pt/docs/DOM:element.insertBefore"