Question

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

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

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

将返回：

<strong>Bold text</strong>

在IE中，它返回原始字符串，带有两个结束强标记。我假设在大多数情况下，Firefox清理错误的代码并不是问题（并且可能是一个好处）。但是，对于我想要完成的任务，我需要在原始HTML源代码中显示的确切代码。

这一切都可能吗？我可以使用其他Javascript函数吗？

Answer 1

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

Answer 2

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

Answer 3

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

IE也像Firefox一样“修复”你的代码，虽然你在序列化时没有注意到，通过创建一个带有tagName /strong的Element节点来对应伪造的end-tag。完全无法保证IE将通过解析/序列化循环保留其他无效标记结构。

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

Answer 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，它只会返回它的解释，而不是原始的。

Answer 5

innerTEXT？或者它有相同的效果？

Answer 6

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

innerHTML替代用于检索页面内容？

6 个答案: