Con l’avvento di AJAX sentiamo sempre di più la necessità di dover imparare Javascript ed in più particolare, imparare ad usare il DOM-2 in modo appropriato.

Con questa piccolissima guida, vorrei introdurvi all’utilizzo del DOM-2 per la creazione di elementi XHTML all’interno della pagina semplicemente passando da Javascript, quindi, senza dover ricaricare tutto passando da un linguaggio Server-Side.

Questo esempio che vi mosterò è veramente semplice ed intuitivo, ma allo stesso momento riesce a far capire come funziona DOM-2.

Quindi, apriamo il nostro text-editor preferito e creiamo una pagina XHTML 1.0 Transitional.
A questo punto inseriamo un’elemento script all’interno della head, ricordandoci di inserire anche l’attributo type settato a “text/javascript”, necessario per far capire al nostro browser di che tipo di script si tratta.

A questo punto andiamo a creare un’elemento div dentro il body e diamogli un id, io ho usato “wrapper”. Torniamo quindi al nostro script.
Creeremo una funzione, chiamiamola create() ed iniziamo come di seguito:

function create() {
 var dom = document.getElementById("wrapper");
}

getElementById, (notate le lettere maiuscole, essenziali), fa parte del DOM di Javascript ed è un metodo che resitiuisce il riferimento all’elemento indicato – in questo caso “wrapper”.
Quindi adesso ogni volta che faremo riferimento a dom ci riferiremo in realtà all’elemento div del documento che ha come ID, “wrapper”.

Andiamo avanti ed aggiungiamo alla funzione queste righe:

var newP = document.createElement("p");
var newText = document.createTextNode("This is the text...");

Qui abbiamo due nuovi metodi, createElement e createTextNode. Tutti e due sono molto semplici da capire, non fanno altro che, rispettivamente, creare un nuovo elemento e un nuovo nodo di testo.
I due metodi, come li vediamo, si riferiscono sempre all’oggetto document.

Come attributo per createElement dobbiamo inserire, all’interno delle virgolette, il nome dell’elemento, quindi: p – in caso di un paragrafo, div – in caso di un elemento division block e così via, ricordiamoci che devono essere minuscoli. Mentre per l’altro metodo dobbiamo inserire un qualunque testo all’interno delle stesse virgolette.

Quindi adesso abbiamo anche i riferimenti ai nuovi due elementi XHTML, un <p> e un testo.

Ora non ci rimane altro che inserirli all’interno della nostra pagina XHTML.

dom.appendChild(newP);
newP.appendChild(newText);

Come notiamo dall’esempio qui sopra, abbiamo usato un nuovo metodo: appendChild.
Anche questo molto semplice, non fa altro che inserire un “Figlio” – Child – all’interno dell’elemento dom, che, come ricordiamo, si riferisce al div con ID “wrapper”.

Quindi, il primo appendChild inserisce il paragrafo dentro il div, mentre, il secondo inserisce il testo all’interno del paragrafo appena creato.

La funzione finita, si presenterà in questo modo:

function create() {
	var dom = document.getElementById("wrapper");
	var newP = document.createElement("p");
	var newText = document.createTextNode("This is the text...");
	dom.appendChild(newP);
	newP.appendChild(newText);
}

Adesso dobbiamo però fare in modo da poterla attivare, inseriamo quindi un bottone nella nostra pagina XHTML e specifichiamo nell’attributo “onclick” la funzione create():

<input type="button" value="Create Element"
     onclick="create(); return false;" />

Pronti, adesso possiamo aprire la nostra paginetta e cliccare sul nostro bel bottone.
Qui potrete trovare l’esempio già funzionante.