innerHTML在主要浏览器中的差异

废话不多说，直接上代码：

<!DOCTYPE html>
<head>
<script src="http://www.oschina.net/js/2011/jquery-1.5.1.min.js"></script>
</head>
<body>
<script>
$(function(){
	var div=document.createElement('div');
	//设置innerHTML为两个空格
	div.innerHTML='  ';
	//IE:0（IE 9未测），chrome:2
	alert(div.innerHTML.length);
});
</script>
</body>

结论：IE在设置innerHTML时会忽略掉开始的所有空格文本。

事实上jQuery的$.support检测leadingWhiteSpace属性正是这样实现的，检测第一个子节点的nodeType是否是文本类型（nodeType==3）。请看jQuery的源码：

var div = document.createElement("div");
div.style.display = "none";
div.innerHTML = "   <link/><table></table><a href='/a' style='color:red;float:left;opacity:.55;'>a</a><input type='checkbox'/>";
jQuery.support = {
                leadingWhitespace: div.firstChild.nodeType === 3,
       ...
};

仔细看看jQuery的源代码你会发现一些很有意思的东西，比如文本节点后的'<link />'，这个节点时用来检测$.support.htmlSerialize。

结论：IE6~8 会直接过滤掉link标签，而chrome会保留，但是innerHTML被更改为' <link>'。

来源：oschina

链接：https://my.oschina.net/u/166661/blog/29776

标签

innerhtml

javascript

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!