innerHTML替代检索页面内容？

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树的一部分。 不是HTML来源。 这不是问题，因为浏览器始终会忽略第二个</strong>标记。

Answer 2

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

Answer 3

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

IE也像Firefox一样“固定”您的代码，尽管您不会在序列化中注意到这种方式，方法是创建一个带有tagName /strong的Element节点，以对应于伪造的最终标签。 根本无法保证IE将通过解析/序列化周期保留其他无效的标记结构。

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

Answer 4

如果不需要HTML呈现（例如，将其用作JS模板之类的东西），则可以将其放在文本区域中，并使用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属性。 它正是您想要实现的目标。