Abbiamo già detto che gli elementi creati con document.createElement non immediatamente visualizzati nella pagina. Infatti essi devono essere prima inseriti in un punto preciso della pagina stessa, cioè in corrispondenza di un nodo dell'albero del DOM.

Torniamo rapidamente all'esempio relativo alla creazione di un elemento img e concentriamoci sulle istruzioni mostrate qui sotto:

La prima istruzione crea un oggetto di nome immagine contenente l'elemento img.

L'istruzione

var corpo = document.body;

seleziona il nodo body e lo assegna alla variabile corpo.

La terza istruzione infine

corpo.appendChild(immagine);

appende l'oggetto immagine come nodo child dell'oggetto (nodo) corpo (che corrisponde al body della pagina).

La figura seguente mostra la struttura del DOM prima e dopo l'esecuzione di appendChild:

Si noti che img viene aggiunto (appeso) come ultimo elemento child di body: in presenza di più nodi figli appendChild aggiunge sempre dopo l'ultimo nodo già presente.

Nell'esempio mostrato il nuovo nodo è stato aggiunto al body, dopo averlo selezionato con

var corpo = document.body;

E' possibile naturalmente aggiungere un nodo a qualsiasi elemento contenitore della pagina (cioè a qualunque elemento che possa contenerne un altro, cioè possa essere parent di un nodo child).

Si consideri l'esempio seguente:

In questo caso l'immagine viene appesa a un elemento con id = myDiv selezionato usando document.getElementById. Naturalmente avremmo potuto fare la stessa cosa anche in questo modo:

 

Si chiamano sibling (o in italiano fratelli) i nodi che condividono uno stesso genitore. Per esempio nella seguente lista gli elementi <li> sono tutti sibling in quanto sono tutti child dello stesso <ul>:

Il metodo insertBefore permette di inserire un nodo sibilng prima di un qualsiasi nodo selezionato. Si considerino le seguenti istruzioni:

Esaminiamole una per una:

1. La prima istruzione var newLi = document.createElement("li") crea un nuovo elemento di tipo LI e lo assegna alla variabile newLI. L'elemento viene creato ma non viene aggiunto al DOM.
2. Le istruzioni var lista = document.getElementById("monete") e var sterlina = document.getElementById("sterlina") selezionano la lista monete e l'elemento sterline all'interno della lista stessa.
3. Infine lista.insertBefore(newLi,sterlina) inserisce come child di lista il nuovo nodo newLI prima del nodo sterlina.

In pratica il DOM viene modificato come mostrato in figura (il nodo li in rosso rappresenta il nuovo nodo aggiunto prima di sterlina):

Notiamo che il nodo li aggiunto non ha id (infatti è stato creato senza nessun attributo) e non ha neppure contenuto testuale (il contenuto testuale è esso stesso un nodo - come vedremo meglio fra breve - rappresentato in colore giallo in figura).

In pratica la nuova struttura della lista è la seguente:

 

Per eliminare un nodo occorre:

1. individuare il nodo parent del nodo stesso
2. individuare il nodo child che si vuole eliminare
3. applicare il metodo removeChild al nodo parent

Per esempio sempre con riferimento alla lista delle valute dell'esempio precedente, la procedura da seguire è questa:

 

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it

Segui @ElePrograMania