überall HTML einfügen

Paul Kinlan

Wenn wir Inhalte in ein HTML-Dokument einfügen möchten, haben wir drei Möglichkeiten:

• DOM-Methoden wie createNode und appendChild verwenden
• Dokumentfragmente verwenden
• innerHTML verwenden

Man könnte auch sagen, dass wir document.write für wenige Anwendungsfälle haben.

innerHTML wurde in HTML5 standardisiert und mit ihr eine Schwestermethode insertAdjacentHTML, die wie innerHTML funktioniert, aber genauer definiert, wo wir den HTML-Inhalt einfügen möchten: beforeBegin, afterBegin, beforeEnd und afterEnd.

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

2008 schrieb John Resig einen Artikel über insertAdjacentHTML mit folgender Schlussfolgerung:

Hinweis:Wenn Browser diese Methode implementieren, wird die Menge an Code, die zum Schreiben einer anständigen JavaScript-Bibliothek erforderlich ist, drastisch reduziert. Ich freue mich auf den Tag, an dem diese Methode (zusammen mit querySelectorAll) allgemein verfügbar ist, damit wir uns richtig an die Arbeit machen und den Code erheblich vereinfachen können.

Bisher war das Hauptproblem von „insertAdjacentHTML“ die mangelnde Browserunterstützung. Da Firefox ab Version 8 insertAdjacentHTML implementiert, ist die Funktion in allen gängigen Browsern verfügbar, einschließlich mobiler Browser. Wenn Sie es jetzt verwenden und dafür sorgen möchten, dass es auch in älteren Firefox-Versionen funktioniert, können Sie diese Polyfill-Funktion verwenden.