Konvertieren von HTML-Strings in DOM-Elemente?

Lesezeit: 7 Minuten

Konvertieren von HTML Strings in DOM Elemente
Turm

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


1646258527 318 Konvertieren von HTML Strings in DOM Elemente
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?

    – Ari

    14. Mai 2016 um 10:37 Uhr

Konvertieren von HTML Strings in DOM Elemente
Ram Y

Warum nicht verwenden InsertAdjacentHTML

zum Beispiel:

// <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

    – vsync

    29. September 2014 um 9:06 Uhr


Konvertieren von HTML Strings in DOM Elemente
orip

Schauen Sie sich John Resigs an reiner JavaScript-HTML-Parser.

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

1646258529 503 Konvertieren von HTML Strings in DOM Elemente
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;
};

–Verwendungszweck

 thatHTML = uiHelper.getHTML('/Scripts/elevation/ui/add/html/add.txt').toDomElement();

  • 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

1646258530 394 Konvertieren von HTML Strings in DOM Elemente
Sarfraz

Geben Sie einfach ein id zum Element und verarbeite es normal zB:

<div id="dv">
<a href="#"></a>
<span></span>
</div>

Jetzt können Sie Folgendes tun:

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


916570cookie-checkKonvertieren von HTML-Strings in DOM-Elemente?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy