Informaticando.NET un intorno web sull'informatica di Giorgio Borelli

Usare Javascript per inserire del codice html all'interno della propria pagina web, è una pratica che presto o tardi la maggior parte degli sviluppatori web userà. Potremmo dire che questa manipolazione del DOM (Document Object Model) rientra in quell'insieme di tecniche note col nome di DHTML (Dynamic HTML o se preferite l'italiano HTML dinamico). Ma vediamo come fare ad inserire dei tag html all'interno della pagina web via Javascript.

Per inserire html via Javascript basta individuare l'oggetto del DOM dove desideriamo inserire l'html e dopodichè basta usare la funzione innerHTML, ma anzichè perderci in lungaggini, facciamo un esempio che risulta più chiarificatore di qualsiasi spiegazione.

Supponiamo di voler inserire una lista non numerata all'interno di un div identificato in maniera univoca dal suo attributo id, nel pezzo di codice Javascript scriveremo in questo modo:

document.getElementById('myid').innerHTML = '<ul><li>primo</li><li>secondo</li><li>terzo</li></ul>';

Semplicissimo, con document.getElementById prendiamo il div (o altro tag html) all'interno della pagina, e con innerHTML inseriamo il codice HTML direttamente sotto forma di stringa.

Con innerHTML inserire tag HTML via Javascript è davvero un gioco da ragazzi.