Metodo HTML DOM Element appendChild()

Definizione e uso

appendChild() Il metodo aggiunge un nodo (elemento) come ultimo figlio dell'elemento.

Vedi anche:

Metodo insertBefore()

Metodo replaceChild()

Metodo removeChild()

Metodo remove()

Proprietà childNodes

Proprietà firstChild

Proprietà lastChild

Proprietà firstElementChild

Proprietà lastElementChild

Metodi document relativi:

Metodo createElement()

Metodo createTextNode()

Esempio

Esempio 1

Aggiungere un elemento alla lista:

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

Prima di aggiungere:

  • Caffè
  • Tè

Dopo aver aggiunto:

  • Caffè
  • Tè
  • Acqua

Prova tu stesso

Esempio 2

Da una lista a un'altra lista di spostare gli elementi della lista:

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

Prima del movimento:

  • Caffè
  • Tè

  • Acqua
  • Latte

Dopo il movimento:

  • Caffè
  • Tè
  • Latte

  • Acqua

Prova tu stesso

Esempio 3

Crea un paragrafo con testo:

  • Crea un elemento paragrafo
  • Crea un nodo di testo
  • Aggiungi un nodo di testo al paragrafo
  • Aggiungi un paragrafo al documento

Crea un elemento <p> e aggiungilo all'elemento <div>:

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

Prova tu stesso

Esempio 4

Crea un elemento <p> e aggiungilo al corpo del documento:

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

Prova tu stesso

Sintassi

element.appendChild(node)

o

node.appendChild(node)

Parametro

Parametro Descrizione
node Obbligatorio. Il nodo da aggiungere.

Valore di ritorno

Tipo Descrizione
Nodo Nodo aggiunto.

Supporto del browser

element.appendChild() È una caratteristica del DOM Level 1 (1998).

Tutti i browser lo supportano completamente:

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