问答详情
源自：9-13 插入节点insertBefore()

我这样写为什么不对？node是指定此节点前插入节点，我把node设置为最后一个节点前为什么不对。

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


  var otest = document.getElementById("test");  

  var node = document.getElementById("otest.lastChild");

  var newnode = document.creatElement("li")

  newnode.innerHTML="PHP"

  otest.insertBefore(newnode,node);

  

</script> 


</body>

</html>


提问者：慕的地0485877 2020-05-12 15:14

个回答

  • qq_慕雪5345453
    2020-05-15 09:28:59
    已采纳

    var node = document.getElementById("otest.lastChild")

    这句话有问题，你的ById找不到这个子节点，id是唯一的，并不能拿来跟标签的子节点用，得设过id=“xxx”；才能用xxx，

    修改代码：

     var otest = document.getElementById("test");  

      var newnode = document.creatElement("li")

      newnode.innerHTML="PHP"

      otest.insertBefore(newnode,test.lastChild);

    这个地方的test.lastChild为什么可以用，是因为insertBefore（）这个方法的第二个属性是插入位置，这个位置可以是节点也可以是id，也可以是标签



    0
  • 慕容8334558
    2020-09-16 14:36:32

    你这句执行不了啊！

    var node = document.getElementById("otest.lastChild");

    document.getElementById()是用括号里的字符串比较HTML文档中的所有id值，返回相应节点。

    而id="otest.lastChild"的节点是不存在的。

    0
  • 慕尼黑1441384
    2020-08-04 09:24:09

    最简洁的答案（通俗易通-->点赞）：

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


      var otest = document.getElementById("test");  

      var html=otest.childNodes[1];

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

      li.innerHTML='php';

      otest.insertBefore(li,html);

    </script> 


    </body>

    </html>


    1
  • 慕婉清9404838
    2020-07-20 17:28:39

    稍微改一下就OK啦：

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


      var otest = document.getElementById("test");  

      var node = otest.lastChild;  //方法1

    //   var node = otest.childNodes[1]; 方法2

      var newnode = document.createElement("li");

      newnode.innerHTML = "php";

      otest.insertBefore(newnode,node);

    </script> 


    </body>

    </html>


    0