我们先来比较两段代码:
- 代码1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul id = "list">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<button onclick = "test()"> 点击</button>
<script>
function test(){
var newNode = document.createElement("li");
var newText = document.createTextNode("e");
newNode.appendChild(newText);
var mylist = document.getElementById("list");
mylist.insertBefore(newNode,mylist.childNodes[1]);
}
</script>
</body>
</html>
- 代码1结果展示
点击按钮前
点击按钮之后
- 代码2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul id = "list"><li>a</li><li>b</li><li>c</li></ul>
<button onclick = "test()"> 点击</button>
<script>
function test(){
var newNode = document.createElement("li");
var newText = document.createTextNode("e");
newNode.appendChild(newText);
var mylist = document.getElementById("list");
mylist.insertBefore(newNode,mylist.childNodes[1]);
}
</script>
</body>
</html>
-
代码2 结果展示
点击按钮前
点击按钮之后
造成这样差异的原因是：元素的 childNodes 属性包含它所有的子节点，这些子节点有可能是元素，文本节点，注释或者处理指令。不同的浏览器在看待这些节点方面存在显著的不同，如下代码：
<ul id = "list">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
如果是 IE 来解析这些代码，那么<ul> 元素会有三个子节点，分别是 3个<li> 元素。但是如果在其他浏览器中，<ul> 元素都会有 7个元素，包括 3 个<li>元素和四个文本节点（表示<li>元素之间的空白符）。如果像下面样将元素间的空白符删掉，那么所有的浏览器都会返回相同数目的子节点。
<ul id = "list"><li>a</li><li>b</li><li>c</li></ul>
对于这段代码，<ul>元素在任意浏览器中都会包含3 个子节点。如果需要通过 childNodes 属性遍历子节点那么一定不要忘记浏览器的这一差别。
