动态增加元素的DOM操作

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

动态添加用户
添加新的用户名
用户信息
JavaScript代码

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>