Obtener la representación de cadena de un nodo DOM

Javascript: tengo la representación DOM de un nodo (elemento o documento) y estoy buscando la representación de cadena del mismo. P.ej,

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

debería producir:

get_string(el) == "<p>Test</p>";

Tengo la fuerte sensación de que me falta algo trivialmente simple, pero simplemente no encuentro un método que funcione en IE, FF, Safari y Opera. Por lo tanto, externalHTML no es una opción.

Puede crear un nodo principal temporal y obtener su contenido innerHTML:

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

var tmp = document.createElement("div");
tmp.appendChild(el);
console.log(tmp.innerHTML); // <p>Test</p>

EDITAR: Consulte la respuesta a continuación sobre HTML externo. el.outerHTML debería ser todo lo que se necesita.

Lo que está buscando es 'externalHTML', pero necesitamos un respaldo porque no es compatible con los navegadores antiguos.

var getString = (function() {
  var DIV = document.createElement("div");

  if ('outerHTML' in DIV)
    return function(node) {
      return node.outerHTML;
    };

  return function(node) {
    var div = DIV.cloneNode();
    div.appendChild(node.cloneNode(true));
    return div.innerHTML;
  };

})();

// getString(el) == "<p>Test</p>"

Encontrarás mi complemento jQuery aquí: Obtener el HTML externo del elemento seleccionado

No creo que necesites ningún guión complicado para esto. Solo usa

get_string=(el)=>el.outerHTML;

En FF puede utilizar el XMLSerializerobjeto para serializar XML en una cadena. IE te da una xmlpropiedad de nodo. Entonces puedes hacer lo siguiente:

function xml2string(node) {
   if (typeof(XMLSerializer) !== 'undefined') {
      var serializer = new XMLSerializer();
      return serializer.serializeToString(node);
   } else if (node.xml) {
      return node.xml;
   }
}

Utilice el elemento # externalHTML:

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

console.log(el.outerHTML);

También se puede utilizar para escribir elementos DOM. De la documentación de Mozilla:

El atributo externalHTML de la interfaz DOM del elemento obtiene el fragmento HTML serializado que describe el elemento, incluidos sus descendientes. Se puede configurar para reemplazar el elemento con nodos analizados a partir de la cadena dada.

https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

Utilice element.outerHTML para obtener una representación completa del elemento, incluidas las etiquetas y los atributos externos.

Si tu elemento tiene padre

element.parentElement.innerHTML

Tratar

new XMLSerializer().serializeToString(element);

Descubrí que para mis casos de uso no siempre quiero el HTML externo completo. Muchos nodos simplemente tienen demasiados hijos para mostrar.

Aquí hay una función (mínimamente probada en Chrome):

/**
 * Stringifies a DOM node.
 * @param {Object} el - A DOM node.
 * @param {Number} truncate - How much to truncate innerHTML of element.
 * @returns {String} - A stringified node with attributes
 *                     retained.
 */
function stringifyEl(el, truncate) {
    var truncateLen = truncate || 50;
    var outerHTML = el.outerHTML;
    var ret = outerHTML;
    ret = ret.substring(0, truncateLen);

    // If we've truncated, add an elipsis.
    if (outerHTML.length > truncateLen) {
      ret += "...";
    }
    return ret;
}

https://gist.github.com/kahunacohen/467f5cc259b5d4a85eb201518dcb15ec

He perdido mucho tiempo averiguando qué está mal cuando itero a través de DOMElements con el código en la respuesta aceptada. Esto es lo que funcionó para mí, de lo contrario, cada segundo elemento desaparece del documento:

_getGpxString: function(node) {
          clone = node.cloneNode(true);
          var tmp = document.createElement("div");
          tmp.appendChild(clone);
          return tmp.innerHTML;
        },

si usa reaccionar:

const html = ReactDOM.findDOMNode(document.getElementsByTagName('html')[0]).outerHTML;