动态增删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">   

     06body,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">   

     11var count = 0;   

     12//添加新用户的操作   

     13function 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//删除元素   

     59function 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>