Question

我针对IE，Chrome和Firefox测试了以下代码，并想知道导致结果差异的原因。

var body = document.getElementsByTagName('body')[0];
body.innerHTML = '<div id="myId"><span>I am a text</span></div>';
var divElement = document.getElementById('myId');

console.log(divElement.children.length); 
// All browsers say "1" !

body.innerHTML = ''; // just resetting the DOM

console.log(divElement.children.length); 
// Chrome and FF say "1", IE says "Sorry guys, it's 0"

毫不奇怪，在三个浏览器中，在第二次innerHTML更改后，divElement对象不再引用呈现的 <div>。我没有遇到麻烦。

我发现更有趣的是IE似乎丢弃了divElement的孩子。 Chrome和FF仍允许我使用旧标记及其子标记，就像它们被渲染一样，但IE将标记转换为空壳。

浏览器处理导致此行为的innerHTML更改的方式有何不同？

Answer 1

IE对innerHTML属性采用不同的方法（与其他浏览器相比）。虽然预期的操作是首先删除子节点（保留引用），然后设置新的HTML片段，IE实际上似乎递归地销毁所有子节点，留下引用（如{{1}在示例中）完全空且无功能。 divElement方法具有类似的效果。

我得到的最佳解释是MSDN post声称在IE中，innerText是DHTML（非DOM）特征，也是低级破坏性方法。我知道innerHTML是在W3 DOM规范之前实现的（回到IE / Netscape浏览器大战），但不知道这种低级行为是否是IE中的遗留实现。

仍然是W3 doesn't say that the child nodes should be preserved or destroyed（这是最近的候选推荐标准，innerHTML was not part of HTML4 specification）。 W3的其他参考文献也没有定论（至少没有我发现过）。

为什么IE在DOM更改后丢弃DOM元素的innerHTML / children？

1 个答案: