动态的增加和删除元素在很多地方都需要用到，比如有时候需要大量数据收集的时候，我们就需要动态增加form表单等。下面是一个例子：
效果演示
| 添加新的用户名 | |
| 用户信息 | |
JavaScript代码
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>DOM-动态添加和删除元素</title>
<style type="text/css">
body,td,caption,input{ font-size:12px; }
.test { border-collapse:collapse; }
.test td { border:1px solid #ccc; line-height:150%; }
</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%" cellspacing="0" class="test">
<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>
本文地址：http://www.nowamagic.net/librarys/veda/detail/447，欢迎访问原出处。
大家都在看