Bir DOM düğümünün dize temsilini alın

Javascript: Bir düğümün (öğe veya belge) DOM temsiline sahibim ve bunun dize gösterimini arıyorum. Örneğin,

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

vermeli:

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

Önemsiz bir şekilde basit bir şeyi kaçırdığıma dair güçlü bir his var ama IE, FF, Safari ve Opera'da çalışan bir yöntem bulamıyorum. Bu nedenle, dış HTML seçeneği yoktur.

Geçici bir üst düğüm oluşturabilir ve bunun innerHTML içeriğini alabilirsiniz:

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>

DÜZENLEME: Lütfen externalHTML ile ilgili aşağıdaki yanıta bakın. el.outerHTML gerekli olan tek şey olmalıdır.

Aradığınız şey 'externalHTML', ancak bir geri dönüşe ihtiyacımız var, eski tarayıcılarla uyumlu değil.

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

JQuery eklentimi burada bulacaksınız: Seçili öğenin dış HTML'sini alın

Bunun için karmaşık bir senaryoya ihtiyacınız olduğunu sanmıyorum. Sadece kullan

get_string=(el)=>el.outerHTML;

FF altında, XMLSerializerXML'i bir dizeye serileştirmek için nesneyi kullanabilirsiniz . IE size bir xmldüğümün özelliğini verir . Böylece şunları yapabilirsiniz:

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

Öğe # externalHTML'yi kullanın:

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

console.log(el.outerHTML);

DOM öğelerini yazmak için de kullanılabilir. Mozilla'nın belgelerinden:

DOM arabiriminin dış HTML özniteliği, alt öğeleri de dahil olmak üzere öğeyi açıklayan serileştirilmiş HTML parçasını alır. Elemanı, verilen dizeden ayrıştırılan düğümlerle değiştirecek şekilde ayarlanabilir.

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

Dış etiketler ve nitelikler dahil, öğenin tam temsilini elde etmek için element.outerHTML'yi kullanın.

Öğenizin ebeveyni varsa

element.parentElement.innerHTML

Deneyin

new XMLSerializer().serializeToString(element);

Kullanım durumlarım için her zaman tüm dış HTML'yi istemediğimi anladım. Birçok düğümün gösterilemeyecek kadar çok çocuğu var.

İşte bir işlev (Chrome'da minimum olarak test edilmiştir):

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

Kabul edilen yanıttaki kodla DOMElements aracılığıyla yinelediğimde neyin yanlış olduğunu anlamak için çok zaman harcadım. Benim için işe yarayan buydu, aksi takdirde her ikinci öğe belgeden kaybolur:

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

react kullanıyorsanız:

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