Uzyskaj ciąg reprezentujący węzeł DOM

JavaScript: Mam reprezentację DOM węzła (elementu lub dokumentu) i szukam reprezentacji ciągu. Na przykład,

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

powinno dać:

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

Mam silne przeczucie, że brakuje mi czegoś trywialnie prostego, ale po prostu nie znajduję metody, która działa w IE, FF, Safari i Opera. Dlatego zewnętrznyHTML nie jest opcją.

Możesz utworzyć tymczasowy węzeł nadrzędny i pobrać jego zawartość 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>

EDYCJA: Zobacz odpowiedź poniżej na temat externalHTML. el.outerHTML powinien być wszystkim, czego potrzeba.

To, czego szukasz, to „externalHTML”, ale potrzebujemy rozwiązania zastępczego, ponieważ nie jest ono zgodne ze starymi przeglądarkami.

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

Znajdziesz moją wtyczkę jQuery tutaj: Pobierz zewnętrzny kod HTML wybranego elementu

Myślę, że nie potrzebujesz do tego żadnego skomplikowanego skryptu. Po prostu użyj

get_string=(el)=>el.outerHTML;

W FF możesz użyć XMLSerializerobiektu do serializacji XML do łańcucha. IE udostępnia xmlwłaściwość węzła. Możesz więc wykonać następujące czynności:

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

Użyj elementu # externalHTML:

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

console.log(el.outerHTML);

Może być również używany do pisania elementów DOM. Z dokumentacji Mozilli:

Atrybut externalHTML elementu interfejsu DOM pobiera zserializowany fragment HTML opisujący element, w tym jego potomków. Można ustawić, aby zastąpić element węzłami przeanalizowanymi z podanego ciągu.

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

Użyj element.outerHTML, aby uzyskać pełną reprezentację elementu, w tym zewnętrzne znaczniki i atrybuty.

Jeśli twój element ma rodzica

element.parentElement.innerHTML

Próbować

new XMLSerializer().serializeToString(element);

Odkryłem, że dla moich przypadków użycia nie zawsze chcę mieć cały zewnętrzny HTML. Wiele węzłów ma po prostu zbyt wiele dzieci do pokazania.

Oto funkcja (minimalnie przetestowana w 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

Zmarnowałem dużo czasu, zastanawiając się, co jest nie tak, gdy przechodzę przez DOMElements z kodem w zaakceptowanej odpowiedzi. U mnie to zadziałało, inaczej co drugi element znika z dokumentu:

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

jeśli używasz Reaguj:

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