Получить строковое представление узла DOM

Javascript: у меня есть представление DOM узла (элемента или документа), и я ищу его строковое представление. Например,

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

должен дать:

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

У меня есть сильное чувство, что мне не хватает чего-то банально простого, но я просто не нашел метода, который работал бы в IE, FF, Safari и Opera. Следовательно, externalHTML - не вариант.

Вы можете создать временный родительский узел и получить его внутреннее HTML-содержимое:

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>

РЕДАКТИРОВАТЬ: см. Ответ ниже о externalHTML. el.outerHTML должен быть всем, что нужно.

То, что вы ищете, это 'externalHTML', но нам нужен запасной вариант, потому что он несовместим со старыми браузерами.

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: Получить внешний HTML-код выбранного элемента

Не думаю, что для этого нужен сложный сценарий. Просто используйте

get_string=(el)=>el.outerHTML;

В FF вы можете использовать XMLSerializerобъект для сериализации XML в строку. IE дает вам xmlсвойство узла. Итак, вы можете сделать следующее:

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

Используйте Element # outerHTML:

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

console.log(el.outerHTML);

Его также можно использовать для написания элементов DOM. Из документации Mozilla:

Атрибут outerHTML интерфейса DOM элемента получает сериализованный фрагмент HTML, описывающий элемент, включая его потомков. Его можно настроить для замены элемента узлами, извлеченными из данной строки.

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

Используйте element.outerHTML, чтобы получить полное представление элемента, включая внешние теги и атрибуты.

Если у вашего элемента есть родитель

element.parentElement.innerHTML

Пытаться

new XMLSerializer().serializeToString(element);

Я обнаружил, что для моих вариантов использования мне не всегда нужен весь внешний HTML. У многих узлов слишком много потомков, чтобы их можно было показать.

Вот функция (минимально протестированная в 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

Я потратил много времени, выясняя, что не так, когда я перебираю DOMElements с кодом в принятом ответе. Это то, что у меня сработало, иначе каждый второй элемент исчезнет из документа:

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

при использовании реакции:

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