动态的增加和删除元素在很多地方都需要用到，比如有时候需要大量数据收集的时候，我们就需要动态增加form表单等。下面是一个例子：
效果演示
动态添加用户
JavaScript代码
|
04
|
<title>DOM-动态添加和删除元素</title>
|
|
05
|
<style type="text/css">
|
|
06
|
body,td,caption,input{ font-size:12px; }
|
|
07
|
.test { border-collapse:collapse; }
|
|
08
|
.test td { border:1px solid #ccc; line- }
|
|
10
|
<script language="javascript">
|
|
16
|
var objName = document.getElementById('name');
|
|
27
|
var row = document.createElement("tr");
|
|
28
|
//设置行对象的ID属性为用户输入的用户名称
|
|
29
|
row.setAttribute("id",objName.value+count);
|
|
31
|
var column = document.createElement("td");
|
|
32
|
//td对象下添加子节点 - 内容 TextNode 对象
|
|
33
|
column.appendChild(document.createTextNode(objName.value));
|
|
35
|
row.appendChild(column);
|
|
38
|
var delBtn = document.createElement("input");
|
|
40
|
delBtn.setAttribute("type","button");
|
|
42
|
delBtn.setAttribute("value","Delete");
|
|
45
|
var name = objName.value+count;
|
|
46
|
delBtn.onclick= function(){delUser(name);};
|
|
48
|
column = document.createElement("td");
|
|
49
|
column.appendChild(delBtn);
|
|
52
|
row.appendChild(column);
|
|
54
|
document.getElementById('userList').appendChild(row);
|
|
59
|
function delUser(name)
|
|
63
|
var objRow = document.getElementById(name);
|
|
64
|
var objTBODY = document.getElementById("userList");
|
|
66
|
objTBODY.removeChild(objRow);
|
|
73
|
<table align="center" width="40%" cellspacing="0" class="test">
|
|
74
|
<caption align="center">动态添加用户</caption>
|
|
77
|
<td><input type="text" id="name"> <input type="button" value="添 加" onClick="addNewUser()"></td>
|
|
80
|
<td colspan="2">用户信息</td>
|
|
83
|
<tbody id="userList"></tbody>
|
