Question

是否有一种原生Javascript方式来获取元素innerHTML及其自己的html？如何获取包含所选元素本身的完整html字符串？

希望这是有道理的。这个例子展示了一种JQuery方式来做我想做的事情，所以希望这清楚地解释了我想要做的事情：http://jquery-howto.blogspot.com/2009/02/how-to-get-full-html-string-including.html

它不是这么简单吗？

var allHTML = myEle.outerHTML + myEle.innerHTML;

Answer 1

最合适的跨浏览器方法是使用最广泛支持的功能并避免扩展DOM原型（因为没有要求浏览器实现它们而一些非常常见的浏览器不支持）并采用适当的功能适当的测试。

一个简单的getOuterHTML函数是：

function getOuterHTML(el) {
  var d;

  if (typeof el.outerHTML == 'string') {
    return el.outerHTML;

  } else {
    d = document.createElement('div');
    d.appendChild(el.cloneNode(true));
    return d.innerHTML;
  }
}

自2000年左右以来，它所依赖的浏览器功能已在所有常见浏览器中提供。

Answer 2

我认为你想使用element.outerHTML。查看this question了解如何以跨浏览器方式执行此操作。

Answer 3

您只需要outerHTML，而不是innerHTML：

myEle.outerHTML

请注意，Firefox目前不支持（2011年12月），这可能是一个交易破坏者。请参阅http://www.quirksmode.org/dom/w3c_html.html处的支持矩阵。但是，它将在即将发布的Firefox版本中得到支持。请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=92264上的错误报告。

Chrome，Safari，IE和Opera都支持它。

如果您需要普遍支持，请参阅How do I do OuterHTML in firefox?。该问题的公认答案包括后备程序。

Answer 4

这应该可以帮助您，将功能添加到您的项目中：

Node.prototype.getHTML = function() {
    var wrap = document.createElement("div");
    var cthis = this.clone();
    wrap.appendChild(cthis);
    return wrap.innerHTML;
}

然后你可以打电话

var allHtml = myEle.getHTML();

辅助函数临时将节点包装在div中，所以当它调用innerHTML时它会抓取原始元素的所有元素，它应该是跨浏览器安全的，它的工具箱的一部分我倾向于用于我的所有项目。

如何获取包含所选元素本身的完整html字符串？

4 个答案: