web-dev-qa-db-de.com

Ruft die Zeichenfolgendarstellung eines DOM-Knotens ab

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

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

sollte nachgeben:

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

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

75
Boldewyn

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>

BEARBEITEN: Bitte sehen Sie die Antwort unten zu outerHTML. el.outerHTML sollte alles sein, was benötigt wird.

109
CMS

Was Sie suchen, ist 'outerHTML', aber wir brauchen einen Fallback, da er 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>"

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

37
gtournie

Unter FF können Sie das XMLSerializer-Objekt verwenden, um XML in einen String zu serialisieren. IE gibt Ihnen eine xml-Eigenschaft 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;
   }
}
15
Bryan Kyle

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

get_string=(el)=>el.outerHTML;
12
Shishir Arora

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 ruft das serialisierte HTML-Fragment ab, das das Element einschließlich seiner Nachkommen beschreibt. Es kann festgelegt werden, dass das Element durch Knoten ersetzt wird, die in der angegebenen Zeichenfolge analysiert werden.

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

6
Rich Apodaca

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

3
Pavel V.

Wenn Ihr Element übergeordnet ist

element.parentElement.innerHTML
1
Vincnetas

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

Hier ist eine Funktion (minimal getestet 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

0
Aaron

Versuchen 

new XMLSerializer().serializeToString(element);
0
Alex Popa

Ich habe viel Zeit damit verbracht, herauszufinden, was falsch ist, wenn ich mit dem Code in der akzeptierten Antwort durch DOMElements iteriere. 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;
        },
0
balagan