voeg overal Aangrenzende HTML in

Paul Kinlan

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

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

Je zou kunnen zeggen dat we ook document.write hebben voor een aantal use cases.

innerHTML is gestandaardiseerd in HTML5 en daarmee ook een broermethode insertAdjacentHTML. Deze werkt als innerHTML , maar maakt het mogelijk om specifieker aan te geven 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>");

John Resig schreef in 2008 een artikel over insertAdjacentHTML met de volgende conclusie:

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