innerHTML在主要浏览器中的差异

最新推荐文章于 2024-10-16 16:26:58 发布

weixin_33989058

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量85

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/astrongpig/blog/29776

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

<!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。