用于检索页面内容的 innerHTML 替代方法？答案

【问题标题】：innerHTML alternative for retrieving contents of page?用于检索页面内容的 innerHTML 替代方法？
【发布时间】：2010-01-13 19:57:28
【问题描述】：

我目前正在使用 innerHTML 来检索 HTML 元素的内容，我发现在某些浏览器中它并不能准确返回源中的内容。

例如，在 Firefox 中的以下行中使用 innerHTML：

<div id="test"><strong>Bold text</strong></strong></div>

将返回：

<strong>Bold text</strong>

在 IE 中，它返回原始字符串，带有两个关闭的强标记。我假设在大多数情况下，Firefox 清理不正确的代码不是问题（并且可能是一个好处）。但是，对于我要完成的工作，我需要原始 HTML 源代码中出现的确切代码。

这有可能吗？我可以使用其他 Javascript 函数吗？

【问题讨论】：

你想要完成什么你需要无效的 HTML？

标签： javascript html innerhtml

【解决方案1】：

我认为您不会在现代浏览器中收到不正确的 HTML 代码。这是正确的行为，因为您没有动态生成的 HTML 的来源。例如 Firefox 的 innerHTML 返回以字符串表示的 DOM tree 的一部分。不是 HTML 源代码。这不是问题，因为无论如何浏览器都会忽略第二个</strong> 标签。

【讨论】：

感谢您的解释。看起来没有办法得到我需要的东西。是时候进入哈克兰了。

【解决方案2】：

innerHTML 不是从文档的实际来源生成的，即。 HTML 文件，但派生自浏览器呈现的 DOM 对象。因此，如果 IE 以某种方式向您显示不正确的 HTML 代码，那么它可能是某种错误。没有这样的方法可以在每个浏览器中检索无效的 HTML 代码。

【讨论】：

【解决方案3】：

由于 Ivan 和 Andris 所说的原因，您通常无法获得原始的无效 HTML。

IE 也像 Firefox 一样“修复”您的代码，尽管在序列化过程中您不会注意到，方法是创建一个带有标签名称 /strong 的 Element 节点以对应于虚假的结束标签。完全不能保证 IE 会通过解析/序列化循环保留其他无效标记结构。

事实上，即使对于有效代码，innerHTML 的输出也不会与输入完全相同。不维护属性顺序，不维护 tagName 大小写（IE 给你<STRONG>），空格是各个地方丢失，实体引用不维护，等等。如果您“需要确切的代码”，则必须保留一份准确代码的副本，例如在相关内容之后编写的 <script> 块中的 JavaScript 变量中。

【讨论】：

【解决方案4】：

如果您不需要 HTML 来呈现（例如，您打算将其用作 JS 模板或其他东西），您可以将其放在 textarea 中并使用 innerHTML 检索内容。

<textarea id="myTemplate"><div id="test"><strong>Bold text</strong></strong></div></textarea>

然后：

$('#myTemplate').html() === '<div id="test"><strong>Bold text</strong></strong></div>'

除此之外，浏览器会决定如何解释 HTML，它只会返回它的解释，而不是原始的。

【讨论】：

【解决方案5】：

内部文本？还是有同样的效果？

【讨论】：

innerText 只允许/支持纯文本。因此，结果与预期相反
innerText 仅适用于 IE，而不适用于 Firefox 或其他浏览器，因此它本身没什么用

【解决方案6】：

您必须使用innerXML 属性。它完全符合您的要求。

【讨论】：