Web Sites com Ajax

Método appendChild

Ao traduzirmos os nomes que compôe o elemento appendChild, teremos: append = acrescentar/anexar e child = filho/criança. Baseando-se nisso, podemos entender esse método como o acréscimo de um novo filho.

Ele funciona exatamente dessa maneira, adiciona um nó (node, 'filho') ao final da lista de filhos (children) de um elemento pai (parent node).

Para ficar mais claro a compreensão, vamos observar este exemplo:

// 1º
var newElement = document.createElement("hr");
// 2º
document.getElementById("box").appendChild(newElement);

Em primeiro lugar, definimos qual será o novo elemento ou a nova tag a ser criada, nesse caso, a tag hr. Entretanto, ela precisa ser filho (child) de algum pai (parent).

Na segunda linha fizemos referência ao atributo ID de uma tag e essa será o pai do novo elemento que será adicionado. Em seguida utilizamos o método appendChild informando a ele a tag que criamos na variável newElement.

Para concluir, a tag hr criada pelo método createElement (veremos mais detalhes a seguir) foi adicionada como filho do elemento cujo atributo ID é igual a box.

Vejamos este exemplo aqui Método: appendChild.htm .

• « Método: innerHTML
• |
• Método: createElement »