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

来源:9-13 插入节点insertBefore()

慕少5154646

2016-11-12 17:43

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


写回答 关注

2回答

  • 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>


  • 老友丶
    2016-11-12 18:36:09

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

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468195 学习 · 21891 问题

查看课程

相似问题