Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

IE处理innerHTML的一个奇葩BUG

  直接操作一个元素的innerHTML就相当于把操作对象原有的子元素全部卸下,再换上其它元素吧?但IE中不仅会从操作对象上卸下子元素,甚至会解除它所有后代元素之间的关系。显然这个行为是莫名其妙的,一出手就把人间全家都给灭了,这算个什么事?
  测试:
<script>
var div=document.createElement("div");
div.innerHTML="<span><a></a></span>";
var span=div.children[0];
console.log(span.children.length);
div.innerHTML=""; //断子绝孙踢!
console.log(span.children.length);
</script>

  这个问题同样影响到了jQuery
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
var div=$("<div/>");
div.html("<span><a></a></span>");
var span=div.children(":first");
console.log(span.children().length);
div.html(""); //断子绝孙踢!
console.log(span.children().length);
</script>
  要解决这个问题,可以试着在对innerHTML赋值之前让其子元素先脱离关系。
<script>
var div=document.createElement("div");
div.innerHTML="<span><a></a></span>";
var span=div.children[0];
console.log(span.children.length);
while(div.lastChild)div.removeChild(div.lastChild); //金蝉脱壳
div.innerHTML=""; //断子绝孙踢!
console.log(span.children.length);
</script>
  这么一来IE的断子绝孙踢就踢不着了!

  测试于:
    Chrome 31.0.1650.63 m
    Firefox 26
    IE 11
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^