Elemento HTML DOM appendChild()

❮ Anterior ❮ Referência do Objeto do Elemento Próximo ❯

Exemplos

Anexar um item a uma lista:

const node = document.createElement("LI");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

Antes de:

Coffee
Tea

Depois de:

Coffee
Tea
Water

Mover um item de uma lista para outra:

const node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);

Antes de:

Coffee
Tea

Water
Milk

Depois de:

Coffee
Tea
Milk

Water

Mais exemplos abaixo.

Definição e uso

O appendChild()método anexa um nó como o último filho de um nó.

Dica: Se você deseja criar um novo parágrafo, com texto, lembre-se de criar o texto como um nó Texto que você anexa ao parágrafo e, em seguida , anexa o parágrafo ao documento.

Você também pode usar esse método para mover um elemento de um elemento para outro (consulte "Mais exemplos").

Veja também:

A propriedade firstChild do elemento

A propriedade lastChild do elemento

O método insertBefore() do elemento

Sintaxe

node.appendChild(node)

Parâmetros

Parameter	Description
node	Required. The node to append.

Valor de retorno

Modelo	Descrição
Nó	O nó anexado

Mais exemplos

Crie um elemento <p> e anexe-o a um elemento <div>:

const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");

para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

Crie um elemento <p> e anexe-o ao corpo do documento:

const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");

para.appendChild(node);
document.body.appendChild(para);