IE innerHTML更改内容？

Question

我有一个问题，我认为它很大。

IE中的.innerHTML产生意外结果，从字面上改变了DOM内容。

我在这里不是在谈论jQuery文档中提到的已知事实，它只是放宽了对数字字段的引用，我是在谈论完全改变的元素构造

请查看以下JSFiddle以获取最佳说明。

假设我们有一个看起来像这样的元素：

<div id=container>
    bla bla bla some text
    <div class="cust_checkbox" custom-data="my_daya" style="width:16px;display:inline-block;"><div class="pip_kap" custom_ert="order"></div></div>
   more text
</div>

如果我们获得容器的innerHTML，我们期望具有：

bla bla bla some text
    <div class="cust_checkbox" custom-data="my_daya" style="width:16px;display:inline-block;"><div class="pip_kap" custom_ert="order"></div></div>
   more text

但是IE返回：

bla bla bla some text
    <div class="cust_checkbox" style="width: 16px; display: inline-block;" custom-data="my_daya"><div class="pip_kap" custom_ert="order"></div></div>
   more text

如您所见，它通过替换类，样式和自定义数据字段的顺序完全改变了cust_checkbox的结构。

我已经重新阅读了innerHTML文档（甚至在MSDN网站上），但是没有提及这种可能的行为。

这是正确的吗？？？？

这花费了我几个小时的时间（我有一些文本字符串函数正在搜索具有特定类和自定义数据的特定元素），并且可以想象它在IE中从未起作用。

Answer 1

在构建DOM之后，源代码就没有任何关联。 属性的顺序对页面的呈现方式没有影响，它们之间也没有空格。 因此，无需保留此类信息。

元素的属性存储在NamedNodeMap中 ，该NamedNodeMap没有以任何特定顺序维护。 Chrome似乎按照属性在源代码中出现的顺序存储属性，即IE按名称排序，本机属性优先。 但是，如果在运行时添加属性，则IE会在最后添加属性。

HTML规范中也定义了序列化本身

尽管属性的确切顺序是由UA定义的 ，并且可能取决于诸如原始标记中给定属性的顺序之类的因素，但排序顺序必须是稳定的，以使得该算法的连续调用可以序列化元素的属性。相同的顺序。 因此，顺序可能是IE解析过程的结果。

因此，只要您始终获得相同的结果，该行为就是正确的。

毫不奇怪，您还将在浏览器的DOM检查器中注意到属性的不同顺序。 使用IE的示例：

源代码：

<button type="button" class="btn btn-default" id="newComment">

DOM资源管理器：

innerHTML的：

<button class="btn btn-default" id="newComment" type="button" test="test">