überall HTML einfügen

Paul Kinlan

Twitter GitHub Glitch Mastodon Startseite

Es gibt drei Möglichkeiten, Inhalte in ein HTML-Dokument einzufügen:

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

Man kann wohl behaupten, dass wir für einige Anwendungsfälle auch document.write haben.

innerHTML wurde in HTML5 standardisiert und ist damit die Bruder-Methode insertAdjacentHTML, die als innerHTML funktioniert. Dank dieser Methode können wir jedoch genauer definieren, wo der HTML-Inhalt eingefügt werden soll: beforeBegin, afterBegin, beforeEnd und afterEnd.

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

Im Jahr 2008 schrieb John Resig einen Artikel über „insertANebenHTML“ mit dieser Schlussfolgerung:

Hinweis:Wenn Browser diese Methode implementieren, wird der Code zum Schreiben einer seriösen JavaScript-Bibliothek erheblich reduziert. Ich freue mich auf den Tag, an dem diese Methode (zusammen mit „querySelectorAll“) umfassender verfügbar ist, damit wir den Code umfassend vereinfachen können.

Bislang war das Hauptproblem mit „insertAsideHTML“ die fehlende Browserunterstützung. Seit Version 8 in Firefox implementiert, ist es in allen gängigen Browsern verfügbar, auch in mobilen Browsern. Wenn du sie jetzt verwenden und sicherstellen möchtest, dass sie in Firefox-Versionen vor 8 funktioniert, kannst du polyfill verwenden.