我针对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更改的方式有何不同？
解决方法
IE采用不同的innerHTML属性方法(与其他浏览器相比).虽然预期的操作是首先删除子节点(保留引用),然后设置新的HTML片段,IE实际上似乎递归地销毁所有子节点,留下引用(如示例中的divElement)完全为空且无功能. innerText方法具有类似的效果.
我得到的最好的解释是在MSDN post声称在IE中,innerHTML是一个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的其他参考文献也没有定论(至少没有我发现过).