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">