Método appendChild() do HTML DOM

Objeto Elemento do HTML DOM

appendChild()A função do método é: adicionar um nó ao final da lista de nós filhos do nó pai especificado.

Se o nó filho especificado for uma referência a um nó existente no documento, o appendChild() o move da posição atual para a nova posição (veja os "Mais exemplos" abaixo).

UsoinsertBefore()O método pode inserir um novo nó filho antes do nó filho existente especificado.

Sintaxe:

node.appendChild(node)

var newElem = document.createElement("h3　　　//　Criar um novo h3Elemento
var newContent = document.createTextNode("Olá, bom dia!");　//　Criar algum conteúdo de texto　
newElem.appendChild(newContent);　//　　Adicionar um nó de texto a um novo h3　
document.body.appendChild(newElem);　　//　　Adicionar o novo elemento e seu conteúdo ao DOM

Atenção:Se você quiser criar um novo elemento com texto, lembre-se de criar o texto como um nó de Texto, então anexá-lo ao elemento e, em seguida, anexar o elemento ao documento.

Compatibilidade do navegador

O método appendChild() é completamente suportado por todos os navegadores:

Valores dos parâmetros

Detalhes técnicos

Mais exemplos

Criar um elemento <p> e anexá-lo a um elemento <div>:

var para = document.createElement("p");　　　//　Criar um nó <p>
var txt = document.createTextNode("Este é um parágrafo.");//　Criar um nó de texto
para.appendChild(txt);//　Adicionar o texto ao <p>
document.getElementById("demo").appendChild(para);//　Anexar <p> a <div>

Criar um elemento <p> e anexá-lo ao final do corpo do documento:

var para = document.createElement("p");　　　//　Criar um nó <p>
var txt = document.createTextNode("Este é um parágrafo.");//　Criar um nó de texto
para.appendChild(txt);//　Adicionar o texto ao <p>
document.body.appendChild(para);//　Anexar <p> ao corpo

Este exemplo move um elemento de sua posição atual para uma nova posição:

var elem = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1).appendChild(elem);

Referências Relacionadas

Referência do HTML DOM:nodeMétodo .hasChildNodes()

Referência do HTML DOM:nodeMétodo .insertBefore()

Referência do HTML DOM:nodeMétodo .removeChild()

Referência do HTML DOM:nodeMétodo .replaceChild()

Referência do HTML DOM:Método document.createElement()

Referência do HTML DOM:Método document.createTextNode()

Referência do HTML DOM:Método document.adoptNode()

Referência do HTML DOM:Método document.importNode()

Objeto Elemento do HTML DOM