Obtenha a representação de string de um nó DOM

Javascript: eu tenho a representação DOM de um nó (elemento ou documento) e estou procurando a representação de string dele. Por exemplo,

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

deve render:

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

Tenho a forte sensação de que estou perdendo algo trivialmente simples, mas simplesmente não encontro um método que funcione no IE, FF, Safari e Opera. Portanto, outerHTML não é uma opção.

Você pode criar um nó pai temporário e obter o conteúdo interno de HTML dele:

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>

EDIT: Por favor, veja a resposta abaixo sobre outerHTML. el.outerHTML deve ser tudo o que você precisa.

O que você está procurando é 'outerHTML', mas precisamos de um substituto porque não é compatível com navegadores antigos.

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

Você encontrará meu plugin jQuery aqui: Obter HTML externo do elemento selecionado

Eu não acho que você precisa de nenhum script complicado para isso. Apenas use

get_string=(el)=>el.outerHTML;

No FF, você pode usar o XMLSerializerobjeto para serializar XML em uma string. O IE oferece uma xmlpropriedade de um nó. Portanto, você pode fazer o seguinte:

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

Use o elemento # outerHTML:

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

console.log(el.outerHTML);

Também pode ser usado para escrever elementos DOM. Da documentação da Mozilla:

O atributo outerHTML da interface DOM do elemento obtém o fragmento HTML serializado que descreve o elemento, incluindo seus descendentes. Ele pode ser configurado para substituir o elemento por nós analisados ​​a partir da string fornecida.

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

Use element.outerHTML para obter a representação completa do elemento, incluindo tags externas e atributos.

Se o seu elemento tem pai

element.parentElement.innerHTML

Experimentar

new XMLSerializer().serializeToString(element);

Descobri que, para meus casos de uso, nem sempre quero todo o outerHTML. Muitos nós simplesmente têm muitos filhos para mostrar.

Esta é uma função (minimamente testada no 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

Perdi muito tempo tentando descobrir o que há de errado ao iterar por meio do DOMElements com o código da resposta aceita. Isso é o que funcionou para mim, caso contrário, cada segundo elemento desaparece do documento:

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

se estiver usando o react:

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