Sabemos que appendChild e insertBefore têm a função de inserir nós. Mas na aplicação, ainda existem algumas diferenças entre os dois.
Por exemplo, quando queremos inserir um nó filho P na seguinte div:
<div id="test"><p id="x1">Nó</p><p>Nó</p></div>
Podemos escrever assim (adicione outro comentário ao testar uma determinada situação):
Copie o código do código da seguinte forma:
<script type="texto/javascript">
var oTest = document.getElementById("teste");
var newNode = document.createElement("p");
newNode.innerHTML = "Isto é um teste";
//O teste começa aqui
//método appendChild:
oTest.appendChild(newNode);
// método inserirBefore:
oTest.insertBefore(newNode,nulo);
</script>
Através do código acima, você pode testar se um novo nó é criado sob o nó div, e este nó é o último nó do div. (Para visualizar o DOM, o IE pode visualizá-lo através do plug-in IE Developer Toolbar e o Firefox pode usar o Firebug)
Obviamente, através deste exemplo, podemos saber que tanto appendChildhild quanto insertBefore podem inserir nós.
No exemplo acima, existe um código assim: oTest.insertBefore(newNode,null). Aqui insertBefore tem dois parâmetros que podem ser definidos. O primeiro é igual aappendChild, mas o segundo é exclusivo para ele. Não só pode ser nulo, mas também pode ser:
Copie o código do código da seguinte forma:
<script type="texto/javascript">
var oTest = document.getElementById("teste");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "Isto é um teste";
oTest.insertBefore(newNode,refChild);
</script>
Este exemplo irá inserir um novo nó na frente do nó x1
Ou:
Copie o código do código da seguinte forma:
<script type="texto/javascript">
var oTest = document.getElementById("teste");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "Isto é um teste";
oTest.insertBefore(newNode,refChild.nextSibling);
</script>
Este exemplo irá inserir um novo nó antes do próximo nó do nó x1
Também disponível para:
Copie o código do código da seguinte forma:
<script type="texto/javascript">
var oTest = document.getElementById("teste");
var newNode = document.createElement("p");
newNode.innerHTML = "Isto é um teste";
oTest.insertBefore(newNode,oTest.childNodes[0]);
</script>
Este exemplo irá inserir um novo nó na frente do primeiro nó filho. Você também pode inserir novos nós em outros locais alterando childNodes[0,1,...].
Como pode ser visto que o método insertBefore() serve para inserir um novo nó na frente do nó filho existente, mas no Exemplo 1, o método insertBefore() também pode ser usado para inserir um novo nó no final do filho lista de nós. Combinando as duas situações, verifica-se que o método insertBefore() pode inserir um nó em qualquer posição da lista de nós filhos.
Destes exemplos:
O método appendChild() adiciona um novo nó filho ao final da lista de nós filhos de um nó.
O método insertBefore() insere um novo nó em qualquer posição na lista de nós filhos do nó.