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:

Let op: Door browsers deze methode te laten implementeren, wordt de hoeveelheid code die nodig is om een ​​respectabele JavaScript-bibliotheek te schrijven drastisch verminderd. Ik kijk uit naar de dag dat deze methode breder beschikbaar is (samen met querySelectorAll), zodat we echt aan de slag kunnen en de code flink kunnen vereenvoudigen.

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.