DOM 动态添加元素以及删除元素示例

时间：2010-08-12 来源：MC2010

摘自：http://lvp.javaeye.com/blog/288315

DOM 的简单操作示例

Java代码

<html>
<head>
<title>DOM-动态添加和删除元素</title>
<style type="text/css">
body,td,caption,input{
font-size:12px;
}
</style>
<script language="javascript">
var count =0;
//添加新用户的操作
function addNewUser(){
//得到文本框对象
var objName = document.getElementById('name');
if(objName.value==""){
alert("用户名不能为空！");
objName.focus();
return;
}else{
count++;
//先创建行tr
var row = document.createElement("tr");
//设置行对象的ID属性为用户输入的用户名称
row.setAttribute("id",objName.value+count);
//创建td对象
var column = document.createElement("td");
//td对象下添加子节点 - 内容 TextNode 对象
column.appendChild(document.createTextNode(objName.value));
//row对象将td对象添加为子节点对象
row.appendChild(column);
//再创建删除按钮
var delBtn = document.createElement("input");
//类型
delBtn.setAttribute("type","button");
//文本
delBtn.setAttribute("value","Delete");
//设置对象的事件处理 - 所调用的函数
var name = objName.value+count;
delBtn.onclick= function(){delUser(name);};
column = document.createElement("td");
column.appendChild(delBtn);
//行对象添加
row.appendChild(column);
//添加这一行到tbody中
document.getElementById('userList').appendChild(row);
objName.value="";
}
}
//删除元素
function delUser(name){
if(name!=null){
var objRow = document.getElementById(name);
var objTBODY = document.getElementById("userList");
//删除
objTBODY.removeChild(objRow);
}
}
</script>
</head>
<body>
<table align="center" width="40%" border="1" cellspacing="0">
<caption align="center">动态添加用户</caption>
<tr>
<td>添加新的用户名</td>
<td>
<input type="text" id="name">  <input type="button" value="添加" onClick="addNewUser()">
</td>
</tr>
<tr>
<td colspan="2">用户信息</td>
</tr>
<tbody id="userList"></tbody>
</table>
</body>
</html>