问答详情
源自：9-22 编程练习

为什么使用了3次appendChild，结果却只创建了1个子节点？

<!DOCTYPE html>

<html>

 <head>

  <title> new document </title>  

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

  <script type="text/javascript"> 

  

     

      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

    function append(){

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

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

     newtd.innerHTML="table";

     newtr.appendChild(newtd);

     newtr.appendChild(newtd);

     newtr.appendChild(newtd);


     document.getElementsByTagName("table")[0].appendChild(newtr);

        

    }




  </script> 

 </head> 

 <body> 

  <table border="1" width="50%" id="table">

  <tr>

<th>学号</th>

<th>姓名</th>

<th>操作</th>

  </tr>  


  <tr>

<td>xh001</td>

<td>王小明</td>

<td><a href="javascript:void();" onclick="remove(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

<td><a href="javascript:void();" onclick="remove(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>  


  </table>

  <input type="button" value="添加一行" onclick="append()" />   <!--在添加按钮上添加点击事件  -->

 </body>

</html>



如上，使用了3次appendChild，实际运行点击时，却只创建了1个子节点：

http://img.mukewang.com/596bc46b0001549810380226.jpg



提问者：吉夫 2017-07-17 03:54

个回答

  • qq_执念妳_0
    2017-07-20 17:06:18
    已采纳

    你三次添加的单元格都是同一个名字，怎么可能有用，就好比你元素属性写三次，那也只有一次有用，先创建三个不同的td再添加

    1
  • 散人研
    2020-04-01 19:22:07

    每次引用对象时，其实都是调用对象的内存地址，所以在循环中对一个对象添加多次，其实都是添加的同一个对象的内存地址，实际对象的数量并没有增加，就好比你对你女朋友连说六次爱你，不等于就有6个女朋友吧？所以必须在每次循环时都重新创建一个新的对象，这样系统就会为这个新对象分配新的内存空间，然后再添加到父元素中才算是真正的添加。

    0
  • qq_野崎梅太郎_0
    2017-08-24 17:50:42

    我也是不明白这个诶，你现在明白了吗？

    0
  • qq_隅_0
    2017-07-17 20:08:17

    我理解的是节点里面是已经包括了三个appendchild了，你说只创建了一个子节点是怎么看出来的？

    0
  • qq_隅_0
    2017-07-17 17:00:57

    tr的子节点是3个td，tr的的parentnode是table，是哪里不对呢？你的意思是为什么要重复写三个appendChild？

    0
  • qq_隅_0
    2017-07-17 16:08:19

    <tr>

    <td>xh001</td>

    <td>王小明</td>

    <td><a href="jav

    ,你看看tr下面是不是有三栏，所以需要插入appendChild就是三个

    0