DOM-Elemente aus HTML-Strings erstellen
Während jQuery einen praktischen Mechanismus zum Erstellen von DOM-Elementen aus HTML-Strings bietet, kann diese Funktionalität auch erreicht werden mithilfe integrierter DOM-Methoden oder über die Prototype-Bibliothek.
DOM Methoden
Für ältere Browser sowie Node/Jsdom (die zum Zeitpunkt des Schreibens keine HTML-Elemente unterstützten) kann die folgende Methode verwendet werden:
function createElementFromHTML(htmlString) {
var div = document.createElement('div');
div.innerHTML = htmlString.trim();
// Change this to div.childNodes to support multiple top-level nodes.
return div.firstChild;
}Es ist wichtig zu beachten, dass diese Methode für einige Elemente nicht funktioniert, die nicht legal Kinder eines
Prototype-Bibliothek
Alternativ bietet die Prototype-Bibliothek über ihre update()-Methode eine integrierte Methode zum Erstellen von Elementen aus HTML-Strings. Hier ein Beispiel:
var element = $(document.createElement('li')).update('<li>text</li>');Anwendungsfälle
Sowohl integrierte DOM-Methoden als auch die Prototype-Bibliothek bieten zuverlässige Möglichkeiten zum Erstellen von DOM-Elementen aus HTML-Strings, insbesondere für ältere Browser oder in Szenarien, in denen jQuery nicht verwendet wird. Diese Methoden bieten einen flexiblen und robusten Ansatz zum dynamischen Generieren von DOM-Inhalten basierend auf HTML-Markup.
Das obige ist der detaillierte Inhalt vonWie kann ich DOM-Elemente aus HTML-Strings ohne jQuery erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Welche Inschrift ist im Währungskreis die vielversprechendste?
Was bedeutet Edge-Computing-Gateway?
Welche Tools zur statischen Codeprüfung gibt es?
Was tun, wenn die Speichernutzung zu hoch ist?
Warum Webstorm die Datei nicht ausführen kann
Es gibt verschiedene Arten von PHP-Arrays
Welches System ist QAD?
Wie richte ich WeChat so ein, dass meine Zustimmung erforderlich ist, wenn mich jemand zu einer Gruppe hinzufügt?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
