Se vogliamo inserire contenuti in un documento HTML, abbiamo tre modi per farlo:
- Utilizzo di metodi DOM come
createNodeeappendChild - Utilizzo dei frammenti di documento
- In uso:
innerHTML
Si può dire che abbiamo anche document.write per alcuni casi d'uso.
innerHTML è stato standardizzato in HTML5 e con esso un metodo gemello insertAdjacentHTML che funziona come innerHTML, ma ci consente di definire in modo più specifico dove vogliamo inserire i contenuti HTML: beforeBegin, afterBegin, beforeEnd e afterEnd.
var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");
Nel 2008 John Resig ha scritto un articolo su insertAdjacentHTML con questa conclusione:
Finora, il problema principale di insertAdjacentHTML è stata la mancanza di supporto da parte dei browser. Poiché Firefox implementa insertAdjacentHTML a partire dalla versione 8, questa funzionalità sarà disponibile in tutti i principali browser, inclusi quelli mobile. Se vuoi utilizzarlo subito e assicurarti che funzioni nelle versioni di Firefox precedenti alla 8, puoi utilizzare questo polyfill.