Dapatkan representasi string dari simpul DOM

Javascript: Saya memiliki representasi DOM dari sebuah node (elemen atau dokumen) dan saya mencari representasi stringnya. Misalnya,

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

harus menghasilkan:

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

Saya memiliki perasaan yang kuat, bahwa saya melewatkan sesuatu yang sepele yang sederhana, tetapi saya tidak menemukan metode yang berfungsi di IE, FF, Safari dan Opera. Oleh karena itu, HTML luar bukanlah pilihan.

Anda dapat membuat node induk sementara, dan mendapatkan konten innerHTML-nya:

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: Silakan lihat jawaban di bawah tentang outerHTML. el.outerHTML harus menjadi semua yang dibutuhkan.

Apa yang Anda cari adalah 'outerHTML', tapi kami membutuhkan penggantian karena tidak kompatibel dengan browser lama.

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

Anda akan menemukan plugin jQuery saya di sini: Dapatkan HTML luar elemen yang dipilih

Saya tidak berpikir Anda memerlukan skrip rumit untuk ini. Gunakan saja

get_string=(el)=>el.outerHTML;

Di bawah FF Anda dapat menggunakan XMLSerializerobjek untuk membuat serial XML menjadi string. IE memberi Anda xmlproperti dari sebuah node. Jadi, Anda dapat melakukan hal berikut:

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

Gunakan Elemen # outerHTML:

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

console.log(el.outerHTML);

Ini juga dapat digunakan untuk menulis elemen DOM. Dari dokumentasi Mozilla:

Atribut outerHTML dari elemen antarmuka DOM mendapatkan fragmen HTML serial yang mendeskripsikan elemen termasuk turunannya. Ini dapat diatur untuk mengganti elemen dengan node yang diurai dari string yang diberikan.

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

Gunakan element.outerHTML untuk mendapatkan representasi penuh dari elemen, termasuk tag dan atribut luar.

Jika elemen Anda memiliki induk

element.parentElement.innerHTML

Mencoba

new XMLSerializer().serializeToString(element);

Saya telah menemukan bahwa untuk kasus penggunaan saya, saya tidak selalu menginginkan keseluruhan HTML luar. Banyak node yang memiliki terlalu banyak turunan untuk ditampilkan.

Berikut fungsinya (diuji minimal di 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

Saya telah membuang banyak waktu untuk mencari tahu apa yang salah ketika saya beralih melalui DOMElements dengan kode di jawaban yang diterima. Inilah yang berhasil untuk saya, jika tidak, setiap elemen detik menghilang dari dokumen:

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

jika menggunakan react:

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