Wie verwende ich innerHTML richtig, um ein Element (mit möglichen untergeordneten Elementen) aus einer HTML-Zeichenfolge zu erstellen?
Hinweis: Ich macheNICH möchte ein beliebiges Framework verwenden.
Das Ziel besteht nur darin, eine Funktion zu erstellen, die ein Element basierend auf einer HTML-Zeichenfolge zurückgibt.
Nehmen Sie ein einfaches HTML-Dokument wie das folgende an:
<html>
<head></head>
<body>
</body>
</html>
Alle genannten Funktionen sind im head-Abschnitt enthalten, und die gesamte Erstellung / Bearbeitung von DOMs erfolgt am Ende des Texts in einem Skript-Tag.
Ich habe eine Funktion createElement, die einen wohlgeformten HTML-String als Argument verwendet. Es geht so
function createElement(str)
{
var div = document.createElement('div');
div.innerHTML = str;
return div.childNodes;
}
Jetzt funktioniert diese Funktion hervorragend, wenn Sie sie folgendermaßen aufrufen:
var e = createElement('<p id="myId" class="myClass">myInnerHTML</p>');
Mit dem geringfügigen (möglicherweise GROSSEN) Problem, dass das erstellte Element kein "wahres" Element ist, hat es immer noch einen parentNode von "div". Wenn jemand weiß, wie man das behebt, dann wäre das großartig.
Nun, wenn ich dieselbe Funktion mit einer komplexeren Zeichenfolge aufrufe:
var e = createElement('<p id="myId" class="myClass">innerHTML<h2 id="h2ID" class="h2CLASS">Heading2</h2></p>');
Erstellt ZWEI Kinder anstatt EIN Kind, wobei ein anderes Kind ein anderes Kind hat.
Sobald Sie div.innerHTML = str tun. Das innerHTML anstelle von
`<p id="myId" class="myClass">innerHTML <h2 id="h2ID" class="h2CLASS">Heading2</h2> </p>`
wendet sich a
`<p id="myId" class="myClass">innerHTML</p> <h2 id="h2ID" class="h2CLASS">Heading2</h2>`
<p.myClass#myId>,<h2.h2CLASS#h2ID>, und ein anderer<p>]