为什么使用了3次appendChild，结果却只创建了1个子节点？
吉夫
2017-07-17 03:54
<!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个子节点：
6回答
-
- qq_执念妳_0
- 2017-07-20 17:06:18
你三次添加的单元格都是同一个名字，怎么可能有用，就好比你元素属性写三次，那也只有一次有用，先创建三个不同的td再添加
-
- 散人研
- 2020-04-01 19:22:07
每次引用对象时，其实都是调用对象的内存地址，所以在循环中对一个对象添加多次，其实都是添加的同一个对象的内存地址，实际对象的数量并没有增加，就好比你对你女朋友连说六次爱你，不等于就有6个女朋友吧？所以必须在每次循环时都重新创建一个新的对象，这样系统就会为这个新对象分配新的内存空间，然后再添加到父元素中才算是真正的添加。
-
- qq_野崎梅太郎_0
- 2017-08-24 17:50:42
我也是不明白这个诶，你现在明白了吗？
-
- qq_隅_0
- 2017-07-17 20:08:17
我理解的是节点里面是已经包括了三个appendchild了，你说只创建了一个子节点是怎么看出来的？
-
- qq_隅_0
- 2017-07-17 17:00:57
tr的子节点是3个td，tr的的parentnode是table，是哪里不对呢？你的意思是为什么要重复写三个appendChild？
-
- qq_隅_0
- 2017-07-17 16:08:19
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="jav
,你看看tr下面是不是有三栏，所以需要插入appendChild就是三个
JavaScript进阶篇
468194 学习 · 21891 问题
相似问题