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

在script 标签内补充代码,实现创建一个新li标签,内容为"php",并将新创建的li插入到内容为HTML的标签前。

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

  for(var i=0;i<otest.length;i++){

    if(otest[i].innerHTML=="HTML"){

       var node=otest[i].childNodes;

    }   

  }

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

    newnode.innerHTML="php";

    otest.insertBefore(newnode,node);

</script> 

为什么却插到后面了?不知道哪错了!求大神帮忙!拜谢了!

提问者:慕数据5775487 2016-09-14 21:11

个回答

  • jidashen
    2016-09-14 23:19:50
    已采纳

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

     

    <script type="text/javascript">


      var otest = document.getElementById("test"); //获得的是ul标签对象,不是数组,可以添加下面一行代码

      var otestArr = document.getElementById("test").childNodes;//获得存储<li>JavaScript</li>与<li>HTML</li>两个标签对象的数组,然后遍历数组,做下面修改

     var node;

      for(var i=0;i<otestArr.length;i++){

        if(otestArr[i].innerHTML=="HTML"){

        node =otestArr[i];

        }   

      }

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

        newnode.innerHTML="php";

        otest.insertBefore(newnode,node);

    这样结果就对了

    JavaScript

    php

    HTML


    另外如果<ul id="test"><li>JavaScript</li><li>HTML</li></ul> 不再写在一起,而是有空格,如下:

    <ul id="test">

    <li>JavaScript</li>

    <li>HTML</li>

    </ul>

    var otestArr = document.getElementById("test").childNodes;此时获得标签对象元素个数就会变为5个,其中有文本对象(空格)


  • q_Amily
    2016-09-14 23:04:18

    <body>
    <ul id="test"><li>JavaScript</li><li>hhh</li></ul>

    <script type="text/javascript">
      var otest = document.getElementById("test"); //这个获得的是ul这个对象,它不是一个数组,所以下面出现otest[i],我觉得这是不对的。

     for(var i=1;i<otest.length;i++){//个for似乎是没有意义的,你可以把试着改动<li>HTML</li>,它仍然会出现php在最底部。我也没弄明白

        if(otest[i].innerHTML=="HTML"){

           var node=otest[i].childNodes;

        }  

      }

     var node=otest.childNodes[0];//把下划线部分换成这句就没问题了

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

        newnode.innerHTML="php";

        otest.insertBefore(newnode,node);

    </script>

    个人见解,不知道对不对,哈哈