PROGRAMMIAMO
JS - Creare una struttura
Creare una struttura di nodi: una tabella

Supponiamo di voler creare una tabella con una riga e due celle fatta in questo modo (per il momento non ci occupiamo del contenuto delle celle, che rimangono vuote):

<table>
<tr><td></td><td></td></tr>
</table>

La figura seguente mostra la struttura ad albero corrispondente al nodo table e ai suoi discendenti:

Per creare una struttura di questo tipo possiamo fare così:

var tabella = document.createElement("table");
var riga = document.createElement("tr");
var cella1 = document.createElement("td");
var cella2 = document.createElement("td");
tabella.appendChild(riga);
riga.appendChild(cella1);
riga.appendChild(cella2);

Si noti come le celle siano state create vuote. Per riempirle, occorre aggiungere alla struttura nodi testuali (vedi sotto).

Aggiungere contenuto testuale a un elemento

Molti elementi (per esempio i paragrafi, le intestazioni, le celle di una tabella etc.) non sono completi senza un contenuto testuale.

Per esempio, creando un nuovo paragrafo in questo modo:

var paragrafo = document.createElement("p");

esso viene creato vuoto, senza contenuto (<p></p>).

Per aggiungere contenuto testuale a un nodo contenitore (come il paragrafo) occorre creare un nodo di tipo testo, figlio del nodo contenitore. Infatti, come abbiamo già osservato parlando della struttura del DOM, i testi sono considerati a tutti gli effetti dei nodi.

Dunque la sequenza di operazioni necessarie è la seguente:

var paragrafo = document.createElement("p");
var testo = document.createTextNode("Ciao a tutti");
paragrafo.appendChild(testo);

Naturalmente il nodo paragrafo e il nodo di testo così creato devono infine essere appesi al DOM (con il metodo appendChild o insertBefore).

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it