Método HTML DOM Element appendChild()

Definição e uso

appendChild() O método adiciona o nó (elemento) como o último filho do elemento.

Veja também:

Método insertBefore()

Método replaceChild()

Método removeChild()

Método remove()

Propriedade childNodes

Propriedade firstChild

Propriedade lastChild

Propriedade firstElementChild

Propriedade lastElementChild

Métodos de documentação relacionados:

Método createElement()

Método createTextNode()

Exemplo

Exemplo 1

Adicionar itens à lista:

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

Antes de adicionar:

  • Café
  • Chá

Depois de adicionar:

  • Café
  • Chá
  • Água

Experimente você mesmo

Exemplo 2

Mover itens de uma lista para outra lista:

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

Antes de mover:

  • Café
  • Chá

  • Água
  • Leite

Depois de mover:

  • Café
  • Chá
  • Leite

  • Água

Experimente você mesmo

Exemplo 3

Criar parágrafo com texto:

  • Criar elemento de parágrafo
  • Criar nó de texto
  • Adicionar nó de texto ao parágrafo
  • Adicionar parágrafo ao documento

Crie um elemento <p> e adicione-o ao elemento <div>:

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

Experimente você mesmo

Exemplo 4

Crie um elemento <p> e adicione-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);

Experimente você mesmo

Sintaxe

element.appendChild(node)

ou

node.appendChild(node)

Parâmetro

Parâmetro Descrição
node Obrigatório. O nó a ser adicionado.

Retorno

Tipo Descrição
Nó Nó adicionado.

Suporte do navegador

element.appendChild() É uma característica do DOM Level 1 (1998).

Todos os navegadores suportam completamente:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte 9-11 Suporte Suporte Suporte Suporte