HTML in JavaScript einbetten

Die Hypertext Markup Language ist die Wurzel aller im Internet angezeigten Webseiten. Das HTML-DOM wird automatisch aktualisiert, indem die Knoten des DOM geändert werden.

Dies kann durch Aktualisieren der bestehenden DOM-Struktur oder Hinzufügen neuer Knoten erfolgen. Im heutigen Beitrag erfahren wir, wie man HTML in JavaScript einbettet.

HTML in JavaScript einbetten

Die Eigenschaft innerHTML des Elements erhält oder setzt das im Element enthaltene HTML- oder XML-Markup.

Um den HTML-Code in das Dokument einzufügen, anstatt den Inhalt eines Elements zu ersetzen, verwenden Sie die Methode insertAdjacentHTML().

Sobald innerHTML gesetzt ist, werden alle Nachkommen des Elements entfernt. innerHTML ersetzt sie durch Knoten, die durch Parsen des bereitgestellten HTML in den htmlString-String erstellt wurden.

Es gibt die HTML-Serialisierung der Nachkommen des Elements als Zeichenfolge zurück.

Die folgenden Schritte werden nach dem Setzen von innerHTML in den Hintergrund ausgeführt.

1. Der angegebene Wert wird entweder als HTML oder XML (je nach Dokumenttyp) geparst, was zu einem DocumentFragment-Objekt führt, das den neuen Satz von DOM-Knoten für die neuen Elemente darstellt.
2. Handelt es sich bei dem Element, dessen Inhalt ersetzt wird, um ein Template-Element, wird das content-Attribut des Template-Elements durch das in Schritt 1 erstellte neue DocumentFragment ersetzt.
3. Bei allen anderen Elementen wird der Inhalt des Elements durch die Knoten im neuen DocumentFragment ersetzt.

Ein SyntaxError wird geworfen, wenn versucht wurde, den Wert von innerHTML mit einem nicht korrekt geformten HTML-String zu setzen. Weitere Informationen finden Sie in der innerHTML-Dokumentation für innerHTML.

Lassen Sie uns das anhand eines Beispiels verstehen.

<div id="list-id"></div>

document.getElementById('list-id').innerHTML =
    '<ol><li>html data</li><li>JS data</li></ol>';

Im obigen Code haben wir ein div-Tag definiert. Sie können auf das div-Tag mit getElementById zugreifen und die geordnete Liste anhängen, indem Sie auf die innerHTML-Eigenschaft des div-Tags zugreifen.

Ausgang:

1. html data
2. JS data

Demo hier