Wie kann ich DOM-Elemente aus HTML-Strings mithilfe der integrierten Methoden oder des Prototyps von JavaScript erstellen?

DOM-Elemente aus HTML-Strings erstellen: Integrierte Methoden und Prototypen erkunden

Wenn Sie vor der Herausforderung stehen, HTML-Strings in DOM-Elemente zu konvertieren greifen Entwickler häufig auf JavaScript-Frameworks wie jQuery zurück. Allerdings ist es nicht immer möglich, Frameworks in ein Projekt zu integrieren. In diesen Szenarien ist es von entscheidender Bedeutung, zu wissen, wie diese Aufgabe mithilfe integrierter DOM-Methoden oder Prototypen ausgeführt werden kann.

DOM-Methoden

Die Methode document.createElement() ist die grundlegende Methode zum Erstellen neuer DOM-Elemente in JavaScript. Durch die Angabe des Tag-Namens des Elements können Sie ein Element generieren und es an einen vorhandenen Knoten anhängen. Zum Beispiel:

var li = document.createElement('li');
li.innerHTML = 'text';
var ul = document.querySelector('ul');
ul.appendChild(li);

Prototype

Die update()-Methode von Prototype bietet eine praktische Möglichkeit, DOM-Elemente aus HTML-Strings zu erstellen und zu aktualisieren. Es analysiert die HTML-Zeichenfolge und fügt das resultierende Element in den angegebenen Knoten ein.

var li = document.createElement('li');
li.update('<li>text</li>');
var ul = document.querySelector('ul');
ul.appendChild(li);

Alternativer Ansatz

Für ältere Browser und Umgebungen, die moderne Methoden nicht unterstützen , ein Fallback-Ansatz besteht darin, ein temporäres Containerelement zu erstellen und dessen innerHTML zu bearbeiten.

function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();
  return div.firstChild;
}

Diese Methode ist eine zuverlässige Problemumgehung für die fehlerhafte innerHTML-Implementierung des IE, unterstützt jedoch bestimmte Elemente nicht, die keine untergeordneten Elemente eines