Voy a crear un elemento XML en JavaScript para intercambiar datos con el lado del servidor. Descubrí que puedo hacerlo con document.createElement. Pero no sé cómo convertirlo en cadena. ¿Hay alguna API en el navegador para hacerlo más fácil? ¿O hay alguna biblioteca JS que incluya esta API?

EDITAR: Encontré esa API del navegador XMLSerializer, debería ser la forma correcta de serializar en una cadena.

Puede obtener el "html externo" clonando el elemento, agregándolo a un contenedor vacío "fuera del escenario" y leyendo el HTML interno del contenedor.

Este ejemplo toma un segundo parámetro opcional.

Llame a document.getHTML (element, true) para incluir los descendientes del 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 outerHTMLpropiedad del elemento (nota: compatible con Firefox después de la versión 11 ) devuelve el HTML de todo el elemento.

Ejemplo

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

De manera similar, puede usar innerHTMLpara obtener el HTML contenido dentro de un elemento dado, o innerTextpara obtener el texto dentro de un elemento (sin marcado HTML).

Ver también

1. externalHTML - Propiedad Javascript
2. Referencia de JavaScript: elementos

La forma más fácil de hacerlo es copiar innerHTML de ese elemento en la variable tmp y dejarlo vacío, luego agregar un nuevo elemento y luego copiar la variable tmp en él. Aquí hay un ejemplo que usé para agregar el script jquery en la parte superior de la cabeza.

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;

Así de simple :)

Hay una tagNamepropiedad y una attributespropiedad también:

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

Consulte también ¿Cómo recorrer en iteración todos los atributos en un elemento HTML? (¡Yo hice!)

Para obtener el contenido entre las etiquetas de apertura y cierre, probablemente podría usar innerHTMLsi no desea iterar sobre todos los elementos secundarios ...

alert(element.innerHTML);

... y luego vuelva a obtener la etiqueta de cierre con tagName.

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

Es posible que esto no se aplique a todos los casos, pero al extraer de xml tuve este problema, que resolví con esto.

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

luego obtén el xml:

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

Luego hice esta función para extraer la línea xml, cuando necesito leer desde un archivo XML, que contiene etiquetas html.

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

y ahora para concluir:

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

Estaba usando Angular, necesitaba lo mismo y llegué a esta publicación.

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

Suponga que su elemento está completo [object HTMLDocument]. Puede convertirlo en una cadena de esta manera:

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