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

来源:9-12 插入节点appendChild()

luona

2016-05-09 17:45

 
<script type="text/javascript">

  var otest = document.getElementById("test");  
  var newnode = document.createElement("li");
  newnode.innerHTML = "PHP";
  otest.appendChild(newnode);         
</script>

为什么非要写  var newnode = document.createElement("li");而不能写成:  var newnode = otest.createElement("li");????我在这个对象下面创建一个li节点不行么?

写回答 关注

4回答

  • 慕设计0525162
    2017-11-09 14:59:40

      <style type="text/css">

      table{

      border: 1px solid #000000;

      }

      table th{

      border: 1px solid red;

      }

      table td{

      border: 1px solid blue;

      }

      </style>

     </head>

     <body>

      <table style="border: 1px solid #000000">

      <tbody>

      <tr style="">

      <th>列1</th>

      <th>列2</th>

      <th>列3</th>

      <th>列4</th>

      <th>列5</th>

      <th>列6</th>

      <th>menu</th>

      </tr>

      <tr>

      <td>列1</td>

      <td>列2</td>

      <td>列3</td>

      <td>列4</td>

      <td>列5</td>

      <td>列6</td>

      <td>

      <input type="button" name="add" value="新增" onclick="addrow(this,1)" />

      <input type="button" name="del" value="删除" onclick="adelrow(this,1)" />

      </td>

      </tr>

      <tr>

      <td>列11</td>

      <td>列12</td>

      <td>列13</td>

      <td>列14</td>

      <td>列15</td>

      <td>列16</td>

      <td>

      <input type="button" name="add" value="新增" onclick="addrow(this,2)" />

      <input type="button" name="del" value="删除" onclick="adelrow(this,2)" />

      </td>

      </tr>

      <tr>

      <td>列21</td>

      <td>列22</td>

      <td>列23</td>

      <td>列24</td>

      <td>列25</td>

      <td>列26</td>

      <td>

      <input type="button" name="add" value="新增" onclick="addrow(this,3)" />

      <input type="button" name="del" value="删除" onclick="adelrow(this,3)" />

      </td>

      </tr>

      <tr>

      <td>列31</td>

      <td>列32</td>

      <td>列33</td>

      <td>列34</td>

      <td>列35</td>

      <td>列36</td>

      <td>

      <input type="button" name="add" value="新增" onclick="addrow(this,4)" />

      <input type="button" name="del" value="删除" onclick="adelrow(this,4)" />

      </td>

      </tr>

      </tbody>

      </table>

     </body>

    </html>

    <script type="text/javascript">

    function addrow(obj,num){

    var tab =obj.parentNode.parentNode.parentNode;

        var trNum = document.getElementsByTagName ("tr").length; 

          var row=document.createElement ("tr"); 

            for(var j=1;j<8;j++){ 

       var cell=document.createElement ("td"); 

       cell.id =trNum+1+"/"+j; 

    if(j==7){

    var inputadd = createAddBtn('addrow');

    var inputdel = createAddBtn('adelrow');

    cell.appendChild(inputadd);

    cell.appendChild(inputdel);

    }

      else{

       cell.appendChild(document.createTextNode ("第"+cell.id+"列")); 

    }


       row.appendChild (cell); 

          } 


            console.log(tab,obj,num,arguments);

            tab.appendChild (row); 

    }

    function adelrow(obj){

    var tabbody =obj.parentNode.parentNode.parentNode;

    var tr =obj.parentNode.parentNode;

            console.log(tabbody,tr,obj,arguments);

            tabbody.removeChild(tr);

    }

    function createAddBtn(fucname)

    {

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

    input.type = "button";

    if(fucname == 'addrow')

             input.value = "新增";

         else

             input.value = "删除";

             //input.onclick = fucname+"(this)";

             input.setAttribute("onclick", fucname+"(this,0)");   

             return  input;

    }

    </script>

    求分析这些代码!!!!感激不尽!!!!

  • _小_七_
    2016-05-10 21:49:36

    因为只有document才有资格创建节点,otest没有创建节点的权限,只有被添加节点的资格


  • 遥琰
    2016-05-09 23:22:38

    li是ul下的,就算把document换了,也只能换成ul的对象吧

    luona

    这个就是ul下面的对象啊

    2016-05-10 19:00:47

    共 1 条回复 >

  • _小_七_
    2016-05-09 22:36:25

    不行。js没有这个用法

    luona

    我真的见过有这样的用法的

    2016-05-10 19:01:19

    共 1 条回复 >

JavaScript进阶篇

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

468062 学习 · 21891 问题

查看课程

相似问题