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中，不以任何特定顺序维护。 Chrome似乎按照它们在源代码中出现的顺序存储属性，IE按名称排序，首先是本机属性。但是如果你在运行时添加一个属性，IE会在最后添加它。

序列化本身也在HTML spec

中定义

  

虽然属性的确切顺序是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">