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

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