动态增加元素的DOM操作

动态的增加和删除元素在很多地方都需要用到，比如有时候需要大量数据收集的时候，我们就需要动态增加form表单等。下面是一个例子：

效果演示

动态添加用户
添加新的用户名  
用户信息

JavaScript代码

view source
print?
01 <html>  
02 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
03 <head>  
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-height:150%;  }  
09 </style>  
10 <script language="javascript">  
11 var count = 0;  
12 //添加新用户的操作  
13 function addNewUser()
14 {  
15     //得到文本框对象  
16     var objName = document.getElementById('name');  
17     if(objName.value=="")
18     {  
19         alert("用户名不能为空！");  
20         objName.focus();  
21         return;  
22     }
23     else
24     {  
25         count++;  
26         //先创建行tr  
27         var row = document.createElement("tr");  
28         //设置行对象的ID属性为用户输入的用户名称  
29         row.setAttribute("id",objName.value+count);  
30         //创建td对象  
31          var column = document.createElement("td");  
32         //td对象下添加子节点 - 内容 TextNode 对象  
33         column.appendChild(document.createTextNode(objName.value));  
34         //row对象将td对象添加为子节点对象  
35         row.appendChild(column);  
36     
37         //再创建删除按钮  
38         var delBtn = document.createElement("input");  
39         //类型  
40         delBtn.setAttribute("type","button");  
41         //文本  
42         delBtn.setAttribute("value","Delete");  
43     
44         //设置对象的事件处理 - 所调用的函数  
45         var name = objName.value+count;  
46         delBtn.onclick= function(){delUser(name);};  
47     
48         column = document.createElement("td");  
49         column.appendChild(delBtn);  
50                         
51         //行对象添加  
52         row.appendChild(column);  
53         //添加这一行到tbody中  
54         document.getElementById('userList').appendChild(row);  
55         objName.value="";  
56     }  
57 }  
58 //删除元素  
59 function delUser(name)
60 {  
61     if(name!=null)
62     {  
63         var objRow = document.getElementById(name);  
64         var objTBODY = document.getElementById("userList");  
65         //删除  
66         objTBODY.removeChild(objRow);  
67     }  
68 }  
69 </script>  
70 </head>  
71   
72 <body>  
73 <table align="center" width="40%" cellspacing="0" class="test">  
74     <caption align="center">动态添加用户</caption>  
75     <tr>  
76         <td>添加新的用户名</td>  
77         <td><input type="text" id="name">  <input type="button" value="添 加" onClick="addNewUser()"></td>   
78     </tr>  
79     <tr>  
80         <td colspan="2">用户信息</td>  
81     </tr>   
82     <!--表格主体-->  
83     <tbody id="userList"></tbody>  
84 </table>  
85 </body>  
86 </html>
posted @ 2010-09-26 18:53  功夫 熊猫  阅读(581)  评论(0)  编辑  收藏  举报