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

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

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

должен давать:

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

У меня сильное чувство, что я пропускаю что-то тривиально просто, но я просто не нахожу метод, который работает в IE, FF, Safari и Opera. Поэтому outerHTML не является вариантом.

Ответ 1

Вы можете создать временного родителя node и получить 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>

Ответ 2

То, что вы ищете, это "outerHTML", но нам нужна резервная копия, которая несовместима со старыми браузерами.

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-код выбранного элемента

Ответ 3

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

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

Ответ 4

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

get_string=(el)=>el.outerHTML;

Ответ 5

Использовать элемент # 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

Ответ 6

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

element.parentElement.innerHTML

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

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