Gibt es eine Möglichkeit, HTML zu konvertieren wie:
<div>
<a href="#"></a>
<span></span>
</div>
oder eine andere HTML-Zeichenfolge in das DOM-Element? (Damit ich appendChild() verwenden kann). Ich weiß, dass ich .innerHTML und .innerText machen kann, aber das ist nicht, was ich will – ich möchte buchstäblich in der Lage sein, einen dynamischen HTML-String in ein DOM-Element umzuwandeln, damit ich es in einem .appendChild() übergeben kann.
Update: Es scheint Verwirrung zu geben. Ich habe den HTML-Inhalt in einem String, als Wert einer Variablen in JavaScript. Das Dokument enthält keinen HTML-Inhalt.
Schauen Sie sich das an: stackoverflow.com/questions/494143/…
– Huntaub
23. Juni 2010 um 18:00 Uhr
Wenn Sie etwas engeres HTML anstelle von Knoten wünschen, schlage ich vor, die folgende Funktion zu verwenden 😉 ` var stringToHTML = function (str) { var dom = document.createElement(‘div’); dom.innerHTML = str; Rückkehr dom; }; `
– La pach’
28. Juli 2021 um 9:08 Uhr
Maerik
Sie können eine verwenden DOMParserso:
var xmlString = "<div id='foo'><a href="#">Link</a><span></span></div>";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => <a href="#">Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link
Danke, es funktioniert super. Nachdem ich den Mozilla-Artikel gelesen hatte, wurde mir klar, dass die Browser auch XML-AJAX-Antworten parsen können – also Browser wie IE, die DOMParser nicht unterstützen, verwende ich synchrone AJAX-Aufrufe mit Daten-URIs, um das XML zu parsen. 🙂
– Turm
23. Juni 2010 um 18:08 Uhr
Wenn Sie Fehler erhalten, weil Sie versuchen zu laden HTML anstatt XML liken Sie das -Tag, dann schauen Sie hier: developer.mozilla.org/en-US/docs/DOM/DOMParser unter “DOMParser HTML-Erweiterung für andere Browser”, um das Laden von HTML zu unterstützen
– HMR
10. Mai 2013 um 0:43 Uhr
@maerics Warum kannst du nicht einfach sagen text/html für HTML-Parsing?
– John Strood
14. Juli 2016 um 11:53 Uhr
@Djack Sie können, aber dann werden die Tags ‘html’ und ‘body’ automatisch generiert.
– akauppi
5. August 2016 um 13:59 Uhr
Hinweis: Ich fand es wichtig, “text/html” anstelle von “text/xml” zu verwenden, wenn ich die erstellten Knoten zurück in das DOM des Browsers (Safari 9.1.2) platziere. Andernfalls funktionierte das CSS-Rendering nicht richtig. Wenn Sie dies verwenden, verwenden Sie ‘.body’, um das automatisch eingefügte body-Element zu umgehen.
– akauppi
5. August 2016 um 14:06 Uhr
Normalerweise erstellen Sie ein temporäres übergeordnetes Element, in das Sie schreiben können innerHTMLextrahieren Sie dann den Inhalt:
var wrapper= document.createElement('div');
wrapper.innerHTML= '<div><a href="#"></a><span></span></div>';
var div= wrapper.firstChild;
Wenn das Element, dessen äußeres HTML Sie haben, ein simples ist <div> wie hier, das ist einfach. Wenn es etwas anderes sein könnte, das nirgendwo hingehen kann, könnten Sie mehr Probleme haben. Wäre es zum Beispiel ein <li>müsste der übergeordnete Wrapper a sein <ul>.
Aber IE kann nicht schreiben innerHTML auf Elemente wie <tr> also wenn du eine hättest <td> Sie müssten den gesamten HTML-String einschließen <table><tbody><tr>…</tr></tbody></table>schreiben das zu innerHTML und das Eigentliche herausziehen <td> Sie wollten von ein paar Ebenen nach unten.
+1 Diese Lösung ist wahrscheinlich tragbarer.
– Maerik
18. Februar 2012 um 6:25 Uhr
Beachten Sie, dass diese Methode alle Ereignishandler oder andere Eigenschaften verliert, die ihr zuvor zugewiesen wurden.
– Bryc
3. Februar 2015 um 20:16 Uhr
@bryc wie würden an eine Zeichenfolge Ereignishandler angehängt /
– Muhammad Umer
16. August 2015 um 2:07 Uhr
@Muhammad – vielleicht mit so etwas wie onclick="..." obwohl das natürlich nicht für Event-Handler funktioniert, die nicht im HTML definiert sind, was Sie vielleicht gemeint haben.
– Achtung
27. Dezember 2015 um 22:25 Uhr
Was ist, wenn die Zeichenfolge so ist some string at the start <div><a href="#">anchor text</a><span>inner text</span></div>string end?
// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>here
In dem Link ist ein Beispiel – aber ich kopiere auch hier eingefügt
– Widder Y
29. September 2014 um 6:53 Uhr
Sie sind sich bewusst, dass Sie dieses Element im DOM haben müssten, damit dies richtig funktioniert? und Sie möchten dieses Element sowieso nicht im DOM, Sie möchten nur einen String in HTML konvertieren in Erinnerung
BEARBEITEN: Wenn Sie möchten, dass der Browser den HTML-Code für Sie analysiert, innerHTML ist genau das, was Sie wollen. Aus dieser SO-Frage:
var tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;
Okay, ich habe die Antwort selbst erkannt, nachdem ich über die Antworten anderer Leute nachdenken musste. 😛
var htmlContent = ... // a response via AJAX containing HTML
var e = document.createElement('div');
e.setAttribute('style', 'display: none;');
e.innerHTML = htmlContent;
document.body.appendChild(e);
var htmlConvertedIntoDom = e.lastChild.childNodes; // the HTML converted into a DOM element :), now let's remove the
document.body.removeChild(e);
Sie müssen dem Dokument kein “e” hinzufügen. Sie müssen auch kein setAttribute darauf ausführen.
– Benutzer52898
7. Juli 2012 um 9:20 Uhr
Das Füllen des Stacks ist das, was ich tue
Hier ist ein kleiner Code, der nützlich ist.
var uiHelper = function () {
var htmls = {};
var getHTML = function (url) {
/// <summary>Returns HTML in a string format</summary>
/// <param name="url" type="string">The url to the file with the HTML</param>
if (!htmls[url])
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, false);
xmlhttp.send();
htmls[url] = xmlhttp.responseText;
};
return htmls[url];
};
return {
getHTML: getHTML
};
}();
–Konvertieren Sie den HTML-String in ein DOM-Element
String.prototype.toDomElement = function () {
var wrapper = document.createElement('div');
wrapper.innerHTML = this;
var df= document.createDocumentFragment();
return df.addChilds(wrapper.children);
};
–Prototyp-Helfer
HTMLElement.prototype.addChilds = function (newChilds) {
/// <summary>Add an array of child elements</summary>
/// <param name="newChilds" type="Array">Array of HTMLElements to add to this HTMLElement</param>
/// <returns type="this" />
for (var i = 0; i < newChilds.length; i += 1) { this.appendChild(newChilds[i]); };
return this;
};
var div = document.getElementById('dv');
div.appendChild(......);
Oder mit jQuery:
$('#dv').get(0).appendChild(........);
Dies ist ein jQuery-Beispiel, das Sie gegeben haben. Ich denke, @rFactor hat nach einem direkteren Javascript-Beispiel gesucht.
– darcy
23. Juni 2010 um 17:34 Uhr
@clarke78: Bevor Sie abstimmen, sollten Sie gesehen haben, dass ich bereits ein Beispiel für einfaches Javascript gegeben habe.
– Sarfraz
23. Juni 2010 um 17:35 Uhr
Das Beispiel funktioniert nicht, da es sich auf bereits vorhandene DOM-Elemente bezieht. Natürlich ist die Situation einfach, wenn das Element bereits ein DOM-Element ist, aber in meiner Situation ist der HTML-Inhalt der Wert einer Variablen, nicht Teil des DOM.
– Turm
23. Juni 2010 um 17:47 Uhr
@rFactor – sind Sie bereit / in der Lage, jQuery zu verwenden? Das Parsen einer HTML-Zeichenfolge in DOM-Elemente ist sehr einfach, wenn Sie es verwenden können
– Johannes Rasch
23. Juni 2010 um 17:49 Uhr
Ich verwende jQuery nicht, aber alles, was jQuery kann, kann mit einfachem JavaScript ausgeführt werden. Wenn Sie also Beispiele haben, lassen Sie es mich wissen. Hmm, eigentlich glaube ich, ich habe die Antwort selbst gefunden. 😛
– Turm
23. Juni 2010 um 17:54 Uhr
9165700cookie-checkKonvertieren von HTML-Strings in DOM-Elemente?yes
Schauen Sie sich das an: stackoverflow.com/questions/494143/…
– Huntaub
23. Juni 2010 um 18:00 Uhr
Wenn Sie etwas engeres HTML anstelle von Knoten wünschen, schlage ich vor, die folgende Funktion zu verwenden 😉 ` var stringToHTML = function (str) { var dom = document.createElement(‘div’); dom.innerHTML = str; Rückkehr dom; }; `
– La pach’
28. Juli 2021 um 9:08 Uhr