获取 DOM 节点的字符串表示形式

javascript dom string cross-browser element

2022-08-30 05:02:23

Javascript：我有一个节点（元素或文档）的DOM表示，我正在寻找它的字符串表示。例如，

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

应产生：

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

我有一种强烈的感觉，我错过了一些简单的东西，但我只是找不到一种在IE，FF，Safari和Opera中起作用的方法。因此，outerHTML 不是选项。

答案 1

您可以创建一个临时父节点，并获取它的内部 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>

编辑：请参阅下面关于outerHTML的答案。el.outerHTML 应该是所有需要的。

答案 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