Se vogliamo inserire contenuti in un documento HTML, abbiamo tre modi per farlo:
- Utilizzo di metodi DOM come
createNode
eappendChild
- Utilizzare i frammenti del documento
- In uso:
innerHTML
Si può dire che abbiamo anche document.write
per pochi casi d'uso.
innerHTML
è stato standardizzato in HTML5 e con questo è un metodo fratello insertAdjacentHTML che funziona come innerHTML
, ma ci permette di definire in modo più specifico dove vogliamo inserire i contenuti HTML: beforeBefore, afterStart, beforeEnd e afterEnd.
var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");
Nel 2008 John Resig scrisse un articolo su insertAsimilarHTML con questa conclusione:
Finora, il problema principale di insertAdimensionHTML è stato la mancanza del supporto del browser. A partire dalla versione 8, Firefox che implementa insertAadHTML sarà disponibile in tutti i principali browser, inclusi i browser per dispositivi mobili. Se vuoi utilizzarlo ora e assicurarti che funzioni nelle versioni di Firefox precedenti alla 8, puoi utilizzare questo polyfill.