<!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