Il metodo insertBefore() in Javascript

Il metodo insertBefore() in Javascript mi permette di inserire un nodo prima di un altro nodo specifico all'interno del DOM (Document Object Model).

parentNode.insertBefore(newNode, referenceNode);

Il metodo insertBefore richiede due argomenti:

newNode: il nuovo nodo che voglio inserire.
referenceNode: il nodo prima del quale viglio inserire il nuovo nodo.

Dove parentNode è il genitore del referenceNode.

È un metodo importante perché in Javascript non si può semplicemente inserire un nodo ovunque. Il nuovo nodo deve essere inserito in relazione ad un altro nodo, che è il suo genitore.

Ecco un esempio pratico

<html>
<body>
<ul id="listaFrutti">
<li>Arancia</li>
<li>Mela</li>
<li>Banana</li>
</ul>
<script>
// Seleziono prima il nodo genitore, che è l'elemento ul
let listaFrutti = document.getElementById("listaFrutti");
// Creo il nuovo nodo, cioè il nuovo li con "Limone"
let nuovoFrutto = document.createElement("li");
nuovoFrutto.textContent = "Limone";
// Ora prendo il riferimento, cioè dove voglio inserire il "Limone"
let riferimento = document.querySelector("#listaFrutti li:nth-child(2)");
// Uso insertBefore per inserire "Limone" prima di "Mela"
listaFrutti.insertBefore(nuovoFrutto, riferimento);
</script>
</body>
</html>

Prima di tutto, lo script seleziona l'elemento <ul> con l'ID listaFrutti tramite il metodo document.getElementById("listaFrutti"). Questo elemento è il "nodo genitore" per i nuovi elementi che verranno inseriti.

Poi, crea un nuovo elemento <li>, che è un item di lista, e gli assegna il testo "Limone". Questo è il nuovo nodo che verrà inserito nella lista.

Lo script trova il secondo elemento <li> all'interno del <ul> usando il metodo querySelector e la regola CSS nth-child(2). Questo elemento è il "punto di riferimento" per dove inserire il nuovo nodo.

Infine, usa il metodo insertBefore per inserire il nuovo nodo "Limone" prima del nodo di riferimento trovato al punto 3. Questo significa che "Limone" sarà posizionato prima di "Mela" nella lista.

Dopo l'esecuzione di questo codice, la lista sul sito web diventa

Arancia
Limone
Mela
Banana

In pratica, questo script modifica il DOM della pagina, aggiungendo un nuovo elemento in una posizione specifica.

È un esempio di come Javascript può essere usato per manipolare dinamicamente i contenuti di una pagina web.

Cosa succede se il "referenceNode" è null? Un caso interessante è quando il referenceNode è null. In questo caso, insertBefore funziona come appendChild e il nuovo nodo viene aggiunto alla fine del parentNode. È come dire: "Se non sai dove metterlo, mettilo in fondo!"

E così via.