Attraverso il DOM è possibile creare dinamicamente nuovi elementi da aggiungere alla pagina. Per creare un nuovo elemento bisogna usare il metodo createElement con la seguente sintassi:

var variabile = document.createElement("elemento");

dove variabile è una qualsiasi variabile valida e elemento è il nome di un elemento html chiuso fra doppi o singoli apici.

Per esempio, come abbiamo visto nella lezione precedente, per creare un elemento img possiamo scrivere:

var immagine = document.createElement("img");

E' importante osservare fin da subito che l'elemento viene creato virtualmente, in quanto esso non viene automaticamente inserito nel DOM. In altre parole, createElement si limita a definire il tipo e le caratteristiche dell'elemento da creare senza però aggiungerlo alla pagina. Volendo fare un paragone poco informatico, createElement si comporta come un cuoco che prepara prima la crema di farcitura e solo in un secondo momento l'aggiunge alla sua torta.

Notiamo anche che l'elemento creato è completamente vuoto, nel senso che non contiene attributi, stili o contenuto interno.

Per aggiungere attributi a un elemento appena creato, dobbiamo usare due metodi. Con createAttribute creiamo un attributo con nome qualsiasi e con setAttributeNode lo assegniamo a un elemento (nodo) creato precedentemente. Si consideri l'esempio seguente:

Consideriamo passo passo la sequenza di istruzioni necessaria per creare un elemento e assegnargli un attributo:

1. La prima istruzione, come già visto, crea un elemento virtuale di tipo img e lo memorizza nella variabile di nome immagine.
2. La seconda istruzione, usando il metodo createAttribute, crea un attributo di nome src e lo memorizza nella variabile srcAttr.
3. La terza istruzione assegna alla proprietà value di srcAttr un valore: in pratica fornisce il valore dell'attributo, cioè l'immagine da visualizzare.
4. La quarta istruzione infine assegna l'attributo (col suo valore) all'elemento img creato all'inizio, usando il metodo setAttributeNode dell'oggetto immagine.

La precedente sequenza all'inizio sembrerà inevitabilmente macchinosa, ma va seguita scrupolosamente ogni volta che si desidera aggiungere un attributo a un elemento. Notiamo anche che, sebbene src sia un attributo standard di img, quando si crea un nuovo elemento img esso non viene dotato automaticamente di nessun attributo, nemmeno di quelli standard e l'unico modo per dare un valore a un attributo è quello mostrato qui sopra.

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it

Segui @ElePrograMania