DOM, aggiungere e rimuovere elementi

Oltre a modificare il contenuto HTML e gli attributi di un elemento, il DOM ci consente di modificare la struttura di un documento. Possiamo ad esempio creare elementi ed attributi e aggiungerli al DOM avendo un effetto immediato sulla pagina HTML.

Consideriamo il seguente esempio:

var mainDiv = document.getElementById("mainDiv");
var img = document.createElement("img");
var srcAttr = document.createAttribute("src");
srcAttr.value = "default.png";
img.setAttributeNode(srcAttr);
mainDiv.appendChild(img);

1. Abbiamo utilizzato il metodo createElement() dell'oggetto document, per creare un elemento <img>.
2. Poi abbiamo creato l'attributo src con il metodo createAttribute() ed impostato il suo valore.
3. Quindi abbiamo associato l'attributo appena creato all'elemento <img> tramite setAttributeNode().
4. Infine abbiamo aggiunto l'elemento in fondo all'elenco dei nodi figli del div mainDiv utilizzando il metodo appendChild().

insertBefore

Oltre ad appendChild() possiamo utilizzare il metodo insertBefore() per inserire un nodo prima di un altro (ad esempio in un elenco). Il metodo prevede due paremetri: il nodo da inserire ed il nodo prima del quale inserirlo nella lista.

Ad esempio, se avessimo voluto inserire il nodo <img> creato nell'esempio precedente prima del <div> mainDiv invece che tra i suoi figli, avremmo scritto il seguente codice:

document.body.insertBefore(img, mainDiv);

Anche se non esiste un metodo per inserire un nodo dopo un altro (un ipotetico metodo insertAfter), possiamo ovviare a questa mancanza utilizzando il seguente approccio:

document.body.insertBefore(img, mainDiv.nextSibling);

In questo modo chiediamo di inserire il nodo prima del fratello successivo del <div>. Nel caso in cui non esista un fratello successivo, mainDiv.nextSibling è null e il nodo viene aggiunto come ultimo elemento, con lo stesso risultato di appendChild().

replaceChild, rimpiazzare un nodo

Oltre ad aggiungere un nodo possiamo rimpiazzarlo con un altro tramite replaceChild(). Questo metodo sostituisce uno dei figli di un elemento con un nuovo nodo. Facendo riferimento all'esempio di prima, possiamo sostituire il primo un nodo figlio del div mainDiv con il nodo <img> appena creato:

mainDiv.replaceChild(img, mainDiv.firstChild());

Eliminare nodi e attributi

I metodi removeChild() e removeAttribute() consentono di eliminare elementi ed attributi dal DOM. Ad esempio, per rimuovere il primo nodo figlio del <div> mainDiv eseguiamo la seguente istruzione:

mainDiv.removeChild(mainDiv.firstChild());

mentre per rimuovere l'attributo class di un elemento scriviamo il codice seguente:

mainDiv.removeAttribute("class");