Il metodo appendChild() in JavaScript

Il metodo appendChild() di JavaScript si usa per aggiungere un nodo come ultimo figlio di un nodo genitore specificato.

appendChild(node)

Dove "node" è il nodo che voglio aggiungere.

Come funziona?

Prima di tutto, identifico un elemento genitore (nodo) nel documento HTML, quello dove aggiungerò il nuovo nodo figlio. Ad esempio, un <div>, un <ul>, o qualsiasi altro elemento.

Successivamente, creo il nodo figlio che voglio aggiungere. Può essere un nuovo elemento o uno già esistente in un'altra parte del documento.

Infine, aggiungo il nodo figlio sotto il nodo genitore tramite appendChild(node).

Esempio pratico

Immaginmo di avere un elenco HTML (<ul>) e vogliamo aggiungere un nuovo elemento elenco (<li>).

<html>
<body>
<ul id="elencoFrutta">
<li>Mela</li>
<li>Banana</li>
</ul>
<script>
var elenco = document.getElementById("elencoFrutta");
var nuovoFrutto = document.createElement("li");
nuovoFrutto.textContent = "Arancia";
elenco.appendChild(nuovoFrutto);
</script>
</body>
</html>

Trovo l'elemento genitore.

Ad esempio, l'elemento html con l'id uguale a "elencoFrutta".

var elenco = document.getElementById("elencoFrutta");

Creo un nuovo elemento <li> come nodo figlio.

var nuovoFrutto = document.createElement("li");

Imposto il testo del nuovo elemento

nuovoFrutto.textContent = "Arancia";

Aggiungo l'elemento <li> all'elenco <ul> ossia dentro il nodo genitore.

elenco.appendChild(nuovoFrutto);

A questo punto nell'elenco puntato ci sono tre elementi.

<ul id="elencoFrutta">
<li>Mela</li>
<li>Banana</li>
<li>Arancia</li>
</ul>

Devo ricordare che appendChild(node) aggiunge sempre il nodo come ultimo figlio. Se il nodo figlio è già presente nel documento, appendChild lo sposta nella nuova posizione.