HTML aus einem HTML-String injizieren

Nehmen wir an, Sie haben HTML, das ein String ist

let string_of_html = `
  <div>Cool</div>
`;

Vielleicht kommt es von einer API oder Sie haben es selbst aus Template-Literalen oder Ähnlichem erstellt.

Sie können innerHTML verwenden, um dies in ein Element einzufügen, wie z. B.

document.body.innerHTML = string_of_html;

// Append it instead
document.body.innerHTML += string_of_html;

Mit der Funktion insertAdjacentHTML haben Sie etwas mehr Kontrolle, da Sie das neue HTML an vier verschiedenen Stellen platzieren können

<!-- beforebegin -->
<node>
  <!-- afterbegin -->
  text inside node
  <!-- beforeend -->
</node>
<!-- afterend -->

Sie verwenden es so...

el.insertAdjacentHTML('beforebegin', string_of_html);
el.insertAdjacentHTML('afterbegin', string_of_html);
el.insertAdjacentHTML('beforeend', string_of_html);
el.insertAdjacentHTML('afterend', string_of_html);

Es gibt Umstände, unter denen Sie das neu erstellte DOM noch in JavaScript haben möchten, bevor Sie damit etwas tun. In diesem Fall könnten Sie Ihren String zuerst parsen, wie z. B.

let dom = new DOMParser()
  .parseFromString(string_of_html, 'text/html');

Das gibt Ihnen ein vollständiges DOM, also müssen Sie dann das hinzugefügte Kind herausholen. Angenommen, es hat nur ein Elternelement, das ist so ähnlich wie...

let dom = new DOMParser()
  .parseFromString(string_of_html, 'text/html');
let new_element = dom.body.firstElementChild;

Jetzt können Sie mit diesem new_element nach Belieben herumspielen, bevor Sie tun, was auch immer Sie damit tun müssen.

Es ist jedoch etwas einfacher, dies zu tun

let new_element = document.createRange()
  .createContextualFragment(string_of_html);

Sie erhalten das Element direkt als Dokumentfragment, um es nach Bedarf anzuhängen oder ähnliches. Diese Methode ist bemerkenswert, da sie tatsächlich <script>s ausführt, die sie darin findet, was sowohl nützlich als auch gefährlich sein kann.

Es gibt eine beträchtliche Menge an Nuancen bei all dem. Zum Beispiel muss das HTML gültig sein. Fehlerhaftes HTML wird einfach nicht funktionieren. Fehlerhaft kann Sie auch überraschen, wie z. B. das Einfügen eines <tr> in eine <table> fehlschlägt, da ein <tbody> fehlt.

Koen Schaft schreibt „Erstellen eines DOM-Knotens aus einem HTML-String“, das das hier Behandelte abdeckt, aber detaillierter und mit mehr Stolperfallen.