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

Question

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

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

var el = document.createElement("p");

el.appendChild(document.createTextNode("Test"));

должно получиться:

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

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

591 10

javascript dom string element cross-browser

10 ответов:

Comments

Ничего не найдено.

CMS · Accepted Answer · 2017-12-27 23:52:17

вы можете создать временный родительский узел и получить его содержимое 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>
EDIT: Пожалуйста, смотрите ответ ниже о outerHTML. Эль.outerHTML должно быть все, что нужно.

gtournie · Accepted Answer · 2017-05-23 15:03:05

то, что вы ищете, это "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 выбранного элемента

Bryan Kyle · Accepted Answer · 2009-11-17 20:38:16

под FF вы можете использовать XMLSerializer объект для сериализации XML в строку. Т. е. дает вам xml свойства узла. Таким образом, вы можете сделать следующее:
function xml2string(node) {
   if (typeof(XMLSerializer) !== 'undefined') {
      var serializer = new XMLSerializer();
      return serializer.serializeToString(node);
   } else if (node.xml) {
      return node.xml;
   }
}

Shishir Arora · Accepted Answer · 2016-03-10 12:13:49

Я не думаю, что вам нужен какой-либо сложный скрипт для этого. Просто используйте
get_string=(el)=>el.outerHTML;

Rich Apodaca · Accepted Answer · 2017-03-05 18:45:59

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

Pavel V. · Accepted Answer · 2016-03-10 16:39:10

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

Vincnetas · Accepted Answer · 2015-01-02 14:51:37

Если ваш элемент имеет parent
element.parentElement.innerHTML

balagan · Accepted Answer · 2014-05-02 22:58:34

Я потратил много времени, выясняя, что случилось, когда я перебрать элементы domelement с кодом принято отвечать. Это то, что сработало для меня, иначе каждый второй элемент исчезает из документа:
_getGpxString: function(node) {
          clone = node.cloneNode(true);
          var tmp = document.createElement("div");
          tmp.appendChild(clone);
          return tmp.innerHTML;
        },

Alex Popa · Accepted Answer · 2018-10-05 19:12:10

попробовать
new XMLSerializer().serializeToString(element);

victorkurauchi · Accepted Answer · 2017-11-09 15:43:30

при использовании react:
const html = ReactDOM.findDOMNode(document.getElementsByTagName('html')[0]).outerHTML;