ü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

Für einige Anwendungsfälle haben wir auch document.write.

innerHTML wurde in HTML5 standardisiert und damit auch eine ähnliche Methode insertAdjacentHTML, die wie innerHTML funktioniert, aber mit der wir genauer definieren können, 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:

Bisher war das Hauptproblem bei insertAdjacentHTML die fehlende Browserunterstützung. Da Firefox insertAdjacentHTML ab Version 8 implementiert hat, ist die Funktion in allen gängigen Browsern verfügbar, auch in mobilen Browsern. Wenn Sie es jetzt verwenden möchten und sichergehen wollen, dass es auch in Firefox-Versionen vor Version 8 funktioniert, können Sie dieses Polyfill verwenden.