Ottieni la rappresentazione di stringa di un nodo DOM

Javascript: ho la rappresentazione DOM di un nodo (elemento o documento) e sto cercando la rappresentazione di stringa di esso. Per esempio,

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

dovrebbe produrre:

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

Ho la forte sensazione che mi manchi qualcosa di banalmente semplice, ma non trovo un metodo che funzioni in IE, FF, Safari e Opera. Pertanto, outerHTML non è un'opzione.

Puoi creare un nodo genitore temporaneo e ottenerne il contenuto 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>

MODIFICA: vedere la risposta di seguito su outerHTML. el.outerHTML dovrebbe essere tutto ciò che è necessario.

Quello che stai cercando è "outerHTML", ma abbiamo bisogno di un fallback perché non è compatibile con i vecchi browser.

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

Troverai il mio plugin jQuery qui: Ottieni l'HTML esterno dell'elemento selezionato

Non penso che tu abbia bisogno di uno script complicato per questo. Basta usare

get_string=(el)=>el.outerHTML;

Sotto FF puoi usare l' XMLSerializeroggetto per serializzare XML in una stringa. IE ti dà una xmlproprietà di un nodo. Quindi puoi fare quanto segue:

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

Usa Element # outerHTML:

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

console.log(el.outerHTML);

Può anche essere usato per scrivere elementi DOM. Dalla documentazione di Mozilla:

L'attributo outerHTML dell'interfaccia DOM dell'elemento ottiene il frammento HTML serializzato che descrive l'elemento, inclusi i suoi discendenti. Può essere impostato per sostituire l'elemento con nodi analizzati dalla stringa data.

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

Usa element.outerHTML per ottenere la rappresentazione completa dell'elemento, inclusi i tag esterni e gli attributi.

Se il tuo elemento ha parent

element.parentElement.innerHTML

Provare

new XMLSerializer().serializeToString(element);

Ho scoperto che per i miei casi d'uso non voglio sempre l'intero outerHTML. Molti nodi hanno semplicemente troppi figli da mostrare.

Ecco una funzione (minimamente testata in 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

Ho perso un sacco di tempo a capire cosa c'è che non va quando itero attraverso DOMElements con il codice nella risposta accettata. Questo è quello che ha funzionato per me, altrimenti ogni secondo elemento scompare dal documento:

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

se si utilizza reagire:

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