So erstellen Sie DOM-Elemente aus HTML-Strings (mehrere Methoden)

Wenn wir einfache dynamische HTML-DOM-Elemente erstellen müssen, können wir HTML-String-Vorlagen verwenden. Es gibt viele verschiedene Methoden, um dies in JavaScript zu erreichen, aber wir haben vielleicht einige Überlegungen.

---

innerHTML

const container = document.createElement('div');
container.innerHTML = `<div>Hello World</div>`;
const node = container.firstElementChild;

Dies ist eine der gebräuchlichsten Methoden. Fügen Sie die HTML-Zeichenfolge in das innerHTML eines Containerelements ein und greifen Sie dann auf den generierten DOM-Knoten zu.

Es kann jedoch nur gültige HTML-Knoten verarbeiten, d. h. Elemente, die in Standard-HTML-Strukturen zulässig sind. Wenn Sie beispielsweise versuchen, ein Element in ein

, wird der Knoten nicht erstellt.

Außerdem führt diese Methode keine Skripte im HTML-String aus, was beim Umgang mit nicht vertrauenswürdigen Inhalten sicherer ist.

innerHTML + Vorlagenelement

const template = document.createElement('template');
template.innerHTML = `<div>Hello World</div>`;
const node = template.content.firstElementChild;

Der Vorteil der Verwendung der