voeg overal Aangrenzende HTML in

Paul Kinlan

Als we inhoud in een HTML-document willen invoegen, kunnen we dat op drie manieren doen:

• Met behulp van DOM-methoden zoals createNode en appendChild
• Documentfragmenten gebruiken
• innerHTML gebruiken

Je kunt met zekerheid zeggen dat we ook document.write hebben voor weinig gebruiksscenario's.

innerHTML is gestandaardiseerd in HTML5 en daarmee een broer-methode insertAdjacentHTML die werkt als innerHTML maar ons in staat stelt specifieker te definiëren waar we de HTML-inhoud willen invoegen: beforeBegin, afterBegin, beforeEnd en afterEnd.

var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");

In 2008 schreef John Resig een artikel over insertAdjacentHTML met deze conclusie:

Tot nu toe was het grootste probleem met insertAdjacentHTML het gebrek aan browserondersteuning. Nu Firefox insertAdjacentHTML implementeert vanaf versie 8, zal het beschikbaar zijn in alle grote browsers, inclusief mobiele browsers. Als u het nu wilt gebruiken en ervoor wilt zorgen dat het werkt in Firefox-versies eerder dan 8, kunt u deze polyfill gebruiken.