Ruft die Zeichenfolgendarstellung eines DOM-Knotens ab

Javascript: Ich habe die DOM-Darstellung eines Knotens (Elements oder Dokuments) und suche nach der Zeichenfolgendarstellung davon. Z.B,

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

sollte ergeben:

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

Ich habe das starke Gefühl, dass mir etwas trivial Einfaches fehlt, aber ich finde einfach keine Methode, die in IE, FF, Safari und Opera funktioniert. Daher ist OuterHTML keine Option.

Sie können einen temporären übergeordneten Knoten erstellen und dessen innerHTML-Inhalt abrufen:

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: Siehe Antwort unten über OuterHTML. el.outerHTML sollte alles sein, was benötigt wird.

Was Sie suchen, ist 'OuterHTML', aber wir brauchen einen Fallback, da es nicht mit alten Browsern kompatibel ist.

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

Mein jQuery-Plugin finden Sie hier: Holen Sie sich das äußere HTML des ausgewählten Elements

Ich glaube nicht, dass Sie dafür ein kompliziertes Skript benötigen. Benutz einfach

get_string=(el)=>el.outerHTML;

Unter FF können Sie das XMLSerializerObjekt verwenden, um XML in eine Zeichenfolge zu serialisieren. IE gibt Ihnen eine xmlEigenschaft eines Knotens. Sie können also Folgendes tun:

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

Verwenden Sie Element # OuterHTML:

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

console.log(el.outerHTML);

Es kann auch zum Schreiben von DOM-Elementen verwendet werden. Aus Mozillas Dokumentation:

Das OuterHTML-Attribut der Element-DOM-Schnittstelle erhält das serialisierte HTML-Fragment, das das Element einschließlich seiner Nachkommen beschreibt. Es kann so eingestellt werden, dass das Element durch Knoten ersetzt wird, die aus der angegebenen Zeichenfolge analysiert wurden.

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

Verwenden Sie element.outerHTML, um eine vollständige Darstellung des Elements einschließlich der äußeren Tags und Attribute zu erhalten.

Wenn Ihr Element übergeordnet ist

element.parentElement.innerHTML

Versuchen

new XMLSerializer().serializeToString(element);

Ich habe festgestellt, dass ich für meine Anwendungsfälle nicht immer die gesamte äußere HTML möchte. Viele Knoten haben einfach zu viele Kinder, um sie anzuzeigen.

Hier ist eine Funktion (minimal in Chrome getestet):

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

Ich habe viel Zeit damit verschwendet, herauszufinden, was falsch ist, wenn ich DOMElements mit dem Code in der akzeptierten Antwort durchlaufe. Das hat bei mir funktioniert, sonst verschwindet jedes zweite Element aus dem Dokument:

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

bei Verwendung reagieren:

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