我针对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导致此行为的更改的方式有何不同？