                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

为什么使用了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个子节点：

吉夫

2017-07-17

源自：JavaScript进阶篇 9-22

关注问题我要回答

3100

操作

收起

6 回答

qq_执念妳_0 回答被采纳 +3 积分
2017-07-20

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

1 回复有任何疑惑可以回复我~

收起回答

散人研
2020-04-01

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