IE11 不存儲<option>內部HTML

Question

來自我正在進行的MSDN 線程的Copypasta 並沒有真正得到任何地方......

我有一個用於 jQuery 的級聯下拉插件，它為 child 中的每個 filterable 創建一個數組，當父更改時，child 被清除，然后重新添加每個匹配項。 在任何地方都沒有任何問題......直到 IE11，它不保存innerHTML。 孩子確實過濾正確，因為每個 的值被保留，但文本不是，導致這個： http : //i.imgur.com/FVNJybj.png

同樣，您可能會注意到尋呼機說有 4 個項目，但沒有顯示任何內容。 該數據通過 AJAX 調用加載，並構造一個 HTML 字符串，然后使用 jQuery.html() 插入。 我已經放入調試代碼來驗證 IE11 實際上是否正確構造了字符串，但是，實際上只有元素被注入到 DOM 中。 這可以在這里看到：[1]

控制台中的選定行是在插入 DOM 之前通過 console.log() 打印的構造 HTML 字符串。 從我的椅子上看，在我看來 IE11 只是錯誤地實現了 HTML 控件功能。 使用 HTML 字符串或限定對象時，完全相同的行為很明顯。

這是一個破壞系統的問題。 由於這個原因，我們的 CRM 在 IE11 中無法使用，而這個功能在 IE6 中甚至沒有問題。 Firefox 和 Chrome 可以按預期工作。

從那以后，我修改了插件以在操作 時僅使用 vanilla JS，但行為保持相同。 下面 [2] 是一個屏幕截圖，它表明 IE11 實際上正在正確過濾，並且在創建初始cascades對象時沒有存儲 'sinnerHTML，因為 SO 不會讓我發布我需要的所有鏈接。

現場演示也包含在下面的評論中。

有人見過這個嗎？ 有任何想法嗎？

Answer 1

弄清楚了。 在 IE 中，.innerHTML 是一個引用調用； 在所有其他瀏覽器中，它返回一個平面值。

Answer 2

我遇到了timeshifter08所描述的類似問題。 我制作了一個基本場景，可以輕松重現這種意外結果。

如前所述，IE11 將清空/清除其 innerHTML 屬性設置為 '' 的元素的子節點。 對於您可能仍然想要執行此操作的情況，預先刪除元素的子元素可以作為一種可能的解決方法。

這個小提琴在 Chrome 和 Firefox 中產生不同的結果，與 IE11 https://jsfiddle.net/gv2xqt6d/7/

    <div id="div">
      <span id="span">
        Span
        <p id="p">P</p>
      </span>
    </div>

    ------------------------

    var div = document.querySelector('#div')
    var span = document.querySelector('#span')

    var p = document.querySelector('#p')  

    // div.removeChild(span); // <- Workaround
    div.innerHTML = '';
    div.appendChild(span);

    console.log(span.innerHTML); // Logs nothing in IE11 :(

Answer 3

如果您打算使用 innerHTML = ''; 刪除子節點然后使用 appendChild 插入回，這在 IE11 中不起作用，因為 IE11 清除存儲在變量中的任何子節點的 innerHTML。

例如

<div id="parent">
    <div id="child">
       <div id="grandchild">
       </div>
    </div>
</div>
var child = document.getElementById('child');
var parent = document.getElementById('parent');
parent.innerHTML = ''; // this line will clear the innerHTML of child object
parent.appendChild(child); // will be broken

// 在代碼中讀取內聯注釋 因此使用 parent.textContent = ''; 反而

Answer 4

對於 IE11，如果您也想為任何替換/appendChild 獲取子 html 內容，請使用textContent而不是innerHTML 。