Creerò un elemento XML in JavaScript per scambiare dati con il lato server. Ho scoperto di poterlo fare condocument.createElement . Ma non so come convertirlo in stringa. C'è qualche API nel browser per renderlo più facile? O esiste una libreria JS che includa questa API?

EDIT: ho scoperto che l'API del browser XMLSerializer, dovrebbe essere il modo giusto per serializzare in stringa.

Puoi ottenere l '"html esterno" clonando l'elemento, aggiungendolo a un contenitore "fuori scena" vuoto e leggendo il codice internoHTML del contenitore.

Questo esempio accetta un secondo parametro opzionale.

Chiama document.getHTML (element, true) per includere i discendenti dell'elemento.

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;
}

La outerHTMLproprietà element (nota: supportata da Firefox dopo la versione 11 ) restituisce l'HTML dell'intero elemento.

Esempio

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

Allo stesso modo, puoi utilizzare innerHTMLper ottenere l'HTML contenuto in un dato elemento o innerTextper ottenere il testo all'interno di un elemento (senza markup HTML).

Guarda anche

1. outerHTML - Proprietà Javascript
2. Riferimento Javascript - Elements

Il modo più semplice per farlo è copiare innerHTML di quell'elemento nella variabile tmp e renderlo vuoto, quindi aggiungere un nuovo elemento e quindi copiare di nuovo la variabile tmp su di esso. Ecco un esempio che ho usato per aggiungere lo script jquery in cima alla testa.

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;

Così semplice :)

C'è una tagNameproprietà e anche una attributesproprietà:

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);

Vedi anche Come scorrere tutti gli attributi in un elemento HTML? (L'ho fatto!)

Per ottenere il contenuto tra i tag di apertura e chiusura che potresti probabilmente usare innerHTMLse non vuoi iterare su tutti gli elementi figli ...

alert(element.innerHTML);

... e poi ottieni di nuovo il tag di chiusura con tagName.

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

Questo potrebbe non essere applicabile a tutti i casi, ma durante l'estrazione da xml ho avuto questo problema, che ho risolto con questo.

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

quindi ottieni l'xml:

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

Quindi ho creato questa funzione per estrarre la riga xml, quando ho bisogno di leggere da un file XML, contenente tag html.

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

e ora per concludere:

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

Stavo usando Angular e avevo bisogno della stessa cosa e sono arrivato a questo post.

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

Supponi che il tuo elemento sia intero [object HTMLDocument]. Puoi convertirlo in una stringa in questo modo:

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);