为什么多次使用insertbefore最后只加了一个

源自：9-13 插入节点insertBefore()

为什么多次使用insertbefore最后只加了一个

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

</head>

<body>

<ul id="test"><li>JavaScript</li><li>HTML</li></ul>

<script type="text/javascript">

o = document.getElementById("test");

var ll=document.createElement('li');

ll.innerHTML='php';

for(var i=0;i<3;i++){o.insertBefore(ll,o.firstChild)};

</script>

</body>

</html>

提问者：慕少5154646 2016-11-12 17:43

个回答

qq_一个人乐的小兔子_03311008

2016-11-22 12:12:37

因为你只是新建了一个element，并且你输出的不是o,而是每次输出一个insertBefore操作，试试把代码换成以下形式，就可以实现你想要的效果。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="test"><li>JavaScript</li><li>HTML</li></ul>
<script type="text/javascript">
o = document.getElementById("test");
for(var i=0;i<3;i++){
var ll=document.createElement('li');
ll.innerHTML='php';
o.insertBefore(ll,o.firstChild);
}
</script>
</body>
</html>

0
老友丶

2016-11-12 18:36:09

因为每次for循环的时候o节点，也就是整个ul是变化的，每次o.firstChild都在变化，不是因为insertBefore是插在某节点的前面，只要每次插在第一个的前面就OK啦。

0