Wie kann ich DOM-Elemente aus HTML-Strings in JavaScript erstellen?

DOM-Elemente aus HTML-Strings erstellen

Die Abfrage untersucht die Machbarkeit der Konvertierung von HTML-Strings in DOM-Elemente, die an ein übergeordnetes Element angehängt werden können mit appendChild(). Es gibt zwar andere Methoden wie innerHTML und innerText, sie bieten jedoch nicht das gewünschte Maß an Flexibilität und Kontrolle.

In JavaScript können Sie einen DOMParser verwenden, um diese Konvertierung zu erreichen. Dieser Parser nimmt eine HTML-Zeichenfolge als Eingabe und generiert ein Dokumentobjekt, das den HTML-Inhalt darstellt. Anschließend kann auf das geparste Dokument zugegriffen werden, um die entsprechenden DOM-Elemente abzurufen.

Betrachten Sie beispielsweise die folgende HTML-Zeichenfolge, die als JavaScript-Variable gespeichert ist:

const htmlString = "<div><a href='#'>Link</a><span></span></div>";

Um diese Zeichenfolge in ein DOM umzuwandeln Element können Sie den folgenden Code verwenden:

const doc = new DOMParser().parseFromString(htmlString, "text/xml");
const firstChildElement = doc.firstChild;

firstChildElement repräsentiert jetzt das