inserisciAAdiacenteHTML ovunque

Paul Kinlan

Twitter GitHub Glitch Mastodon Homepage

Se vogliamo inserire contenuti in un documento HTML, abbiamo tre modi per farlo:

• Utilizzo di metodi DOM come createNode e appendChild
• 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:

Nota: l'implementazione di questo metodo da parte dei browser ridurrà drasticamente la quantità di codice necessaria per scrivere una libreria JavaScript rispettabile. Non vedo l'ora del giorno in cui questo metodo sarà più ampiamente disponibile (insieme a querySelectorAll) in modo da poter davvero allacciarci e semplificare il codice.

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.