Restiamo ancora nell'ambito del DHTML (Dynamic HTML) e manipolazione del DOM a mezzo codice Javscript. Vediamo come creare o rimuovere un elemento hmtl via Javascript. Le necessità di questa tecnica possono essere diverse ed applicabili in svariati contesti, facciamo dei semplici esempi che possono essere modificati ed adattati alle varie esigenze, con due semplici funzioni Javascript sarà semplicissimo aggiungere o rimuovere elementi html al volo via Javascript.
Creare ed aggiungere un tag html via Javscript
Supponiamo di voler aggiungere un nuovo paragrafo con del contenuto html dentro un div del quale conosciamo l'attribuoto id. Come sempre scriviamo prima il codice Javascript per creare ed aggiungere un nuovo elemento html nel documento della pagina e poi lo spieghiamo:
//aggiungere un paragrafo dentro un div
var div = document.getElementById('my_id_div');
var newPar = document.createElement("p");
newPar.setAttribute('id', 'my_id_p');
newPar.innerHTML = "<h3>nuovo paragrafo</h3>";
div.appendChild(newPar);
Il codice Javascript è molto semplice, per prima cosa individuiamo via codice il div interessato con la classica document.getElementById, dopo creiamo un nuovo paragrafo, e per far questo usiamo la funzione di libreria Javascript createElement, passandogli come paramentro (in forma di stringa) proprio il nome del tag html da creare, in questo caso p (paragrafo). Con setAttribute (non obbligatoria) assegniamo un id al nostro paragrafo e successivamente innestiamo al suo interno del codice html con innerHTML, infine lo aggiungiamo al documento, all'interno del div selezionato con la funzione appendChild.
Rimuovere un tag html via Javscript
Supponiamo questa volta di voler rimuovere il paragrafo aggiunto precedentemente, vediamo qual'è il codice Javascript per fare questo:
// Rimuovere un paragrafo dal div
var par = document.getElementById('my_id_p');
par.parentNode.removeChild(par);
Come sempre la prima cosa da fare è individuare con document.getElementById e creare l'oggetto che ci permetta di gestire l'elemento html da rimuovere, in questo caso il nostro paragrafo. Adesso introduciamo la funzione removeChild, che tramite la proprietà parentNode ci consente di rimuovere il tag html (il paragrafo) dall'albero del DOM; è importante sottolineare come parentNode ci permette di riferirci all'elemento html contenitore o padre del tag html da rimuovere.
Come vedete, creare, aggiungere o rimuovere dinamicamente elementi html via Javascript dal documento della pagina web è davvero semplice con le tre funzioni createElement, appendChild e removeChild, basta adoperarle nel modo opportuno ed adattarle alle proprie esigenze. Se qualcuno desidera porrè qualche domanda, lo spazio dei commenti è a vostra disposizione, ogni intervento sarà gradito.