In questo esempio, mostriamo come efficace può risultare l'uso dei metodi e delle proprietà W3C, e del metodo innerHTML.
L'esempio consiste nel generare dinamicamente una lista di articoli suggeriti per la naviagazione e nel mostrarli generando i tag in modo automatico.
Nell'esempio l'array dei dati è dichiarato nel codice me ma ovviamente la fonte può essere una ulteriore pagina dinamica in qualsivoglia linguaggio server.
In particolare, ci si può rifare all'articolo di Wolfgang Cecchin Alleggerire le pagine di dati con JavaScript(esempio) e alle sue conclusioni sulla possibilità di sfruttare il JavaScript per rendere leggere pagine che con il normale codice HTML sarebbero notevolmente più pesanti.
A questo possiamo aggiungere la possibilità di rendere le pagine dinamiche utilizzando il DOM W3C, i suoi metodi e il metodo innerHTML.
Negli esempi proposti, oltre ad ottenere i risultati dettati dall'articolo di Cecchin, inseriamo e rimuoviamo dinamicamente le righe della tabella riguardanti i vari articoli.
Nel primo esempio proposto, sono utilizzati rigorosamente i metodi e la sintassi del W3C.
Come si nota andando a leggere il codice, esistono degli ostacoli che occorre superare originati da differenze esistenti tra i vari browser. Non si tratta di vero e proprio codice crossbrowser, ma più che altro di accorgimenti per venire incontro a browser che, pur supportando il DOM W3C, nella migliore delle ipotesi, danno delle "interpretazioni personali" alle specifiche, nella peggiore, "inventano" un proprio comportamento (soprattutto Explorer). Un esempio di questo lo si è gia visto nel tutorial per l'inserimento dinamico di nuovi elementi delle lezioni precedenti.
Teniamo a mente però che, grazie proprio alle potenzialità e alla elasticità del DOM W3C, praticamente ogni possibile ostacolo, ha la sua soluzione (il problema è solo conoscerla).
esempio: Tutorial con l'uso del DOM standard
Nel secondo esempio, realizziamo gli stessi obiettivi, facendo però uso del metodo non standard innerHTML, che oltre ad alleggerire ulteriormente la pagina, semplifica sia la scrittura, sia la lettura del codice.
esempio: Tutorial con l'uso di innerHTML