Ich werde ein XML-Element in JavaScript erstellen, um Daten mit der Serverseite auszutauschen. Ich habe festgestellt, dass ich es schaffen kann document.createElement. Aber ich weiß nicht, wie ich es in einen String konvertieren soll. Gibt es eine API im Browser, um dies zu vereinfachen? Oder gibt es eine JS-Bibliothek mit dieser API?

BEARBEITEN: Ich fand, dass die Browser-API XMLSerializer der richtige Weg sein sollte, um in Zeichenfolgen zu serialisieren.

Sie können das 'äußere HTML' erhalten, indem Sie das Element klonen, es einem leeren 'Offstage'-Container hinzufügen und das innerHTML des Containers lesen.

In diesem Beispiel wird ein optionaler zweiter Parameter verwendet.

Rufen Sie document.getHTML (element, true) auf, um die Nachkommen des Elements einzuschließen.

document.getHTML= function(who, deep){
    if(!who || !who.tagName) return '';
    var txt, ax, el= document.createElement("div");
    el.appendChild(who.cloneNode(false));
    txt= el.innerHTML;
    if(deep){
        ax= txt.indexOf('>')+1;
        txt= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax);
    }
    el= null;
    return txt;
}

Die Elementeigenschaft outerHTML(Hinweis: wird von Firefox nach Version 11 unterstützt ) gibt den HTML-Code des gesamten Elements zurück.

Beispiel

<div id="new-element-1">Hello world.</div>

<script type="text/javascript"><!--

var element = document.getElementById("new-element-1");
var elementHtml = element.outerHTML;
// <div id="new-element-1">Hello world.</div>

--></script>

In ähnlicher Weise können Sie innerHTMLden in einem bestimmten Element enthaltenen innerTextHTML-Code oder den Text in einem Element abrufen (ohne HTML-Markup).

Siehe auch

1. OuterHTML - Javascript-Eigenschaft
2. Javascript Referenz - Elemente

Am einfachsten ist es, innerHTML dieses Elements in die Variable tmp zu kopieren und leer zu machen, dann ein neues Element anzuhängen und danach die Variable tmp zurück zu kopieren. Hier ist ein Beispiel, mit dem ich oben im Kopf ein Abfrageskript hinzugefügt habe.

var imported = document.createElement('script');
imported.src = 'http://code.jquery.com/jquery-1.7.1.js';
var tmpHead = document.head.innerHTML;
document.head.innerHTML = "";
document.head.append(imported);
document.head.innerHTML += tmpHead;

So einfach :)

Es gibt eine tagNameImmobilie und auch eine attributesImmobilie:

var element = document.getElementById("wtv");
var openTag = "<"+element.tagName;
for (var i = 0; i < element.attributes.length; i++) {
    var attrib = element.attributes[i];
    openTag += " "+attrib.name + "=" + attrib.value;
}
openTag += ">";
alert(openTag);

Siehe auch Wie werden alle Attribute in einem HTML-Element durchlaufen? (Ich tat!)

Um den Inhalt zwischen den Open- und Close-Tags abzurufen, können Sie ihn wahrscheinlich verwenden, innerHTMLwenn Sie nicht alle untergeordneten Elemente durchlaufen möchten ...

alert(element.innerHTML);

... und dann wieder das Close-Tag mit bekommen tagName.

var closeTag = "</"+element.tagName+">";
alert(closeTag);

Dies gilt möglicherweise nicht für alle Fälle, aber beim Extrahieren aus XML hatte ich dieses Problem, das ich damit gelöst habe.

function grab_xml(what){
var return_xml =null;
    $.ajax({
                type: "GET",
                url: what,
                success:function(xml){return_xml =xml;},
        async:   false
        });
return(return_xml);
}

dann hol dir die xml:

var sector_xml=grab_xml("p/sector.xml");
var tt=$(sector_xml).find("pt");

Dann habe ich diese Funktion gemacht, um XML-Zeilen zu extrahieren, wenn ich aus einer XML-Datei lesen muss, die HTML-Tags enthält.

    function extract_xml_line(who){
    var tmp = document.createElement("div");
    tmp.appendChild(who[0]);
    var tmp=$(tmp.innerHTML).html();
    return(tmp);
}

und nun zum Schluss:

var str_of_html= extract_xml_line(tt.find("intro")); //outputs the intro tag and whats inside it: helllo  <b>in bold</b>

Ich benutzte Angular und brauchte dasselbe und landete auf diesem Posten.

@ViewChild('myHTML', {static: false}) _html: ElementRef;
this._html.nativeElement;

Angenommen, Ihr Element ist vollständig [object HTMLDocument]. Sie können es folgendermaßen in einen String konvertieren :

const htmlTemplate = `<!DOCTYPE html><html lang="en"><head></head><body></body></html>`;

const domparser = new DOMParser();
const doc = domparser.parseFromString(htmlTemplate, "text/html"); // [object HTMLDocument]

const doctype = '<!DOCTYPE html>';
const html = doc.documentElement.outerHTML;

console.log(doctype + html);