除了使用innerHTML属性方便的控制信息在对应位置动态显示外，为了更加灵活地控制Web页面的动态效果，往往需要借助DOM提供的方法和属性对HTML文档进行操作，下面给出一个笔者刚刚做的一个动态添加的效果，当用户单击确认添加按钮时，在下方的表格里马上出现新增的信息，单击删除按钮时，马上删对应的信息，
对应的源码如下：
< head > < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" > < link href ="images/css.css" type ="text/css" rel ="stylesheet" > </ head > < script language ="javascript" type ="text/javascript" > ... // 增加成员函数 function addSort() ...{ var name = document.getElementById("name").value; if(name == "" ) ...{ return; } var row = document.createElement("tr"); row.setAttribute("id", name); var cell = document.createElement("td"); cell.appendChild(document.createTextNode(name)); row.appendChild(cell); var deleteButton = document.createElement("input"); deleteButton.setAttribute("type", "button"); deleteButton.setAttribute("value", "删除"); deleteButton.onclick = function () ...{ deleteSort(name); }; cell = document.createElement("td"); cell.appendChild(deleteButton); row.appendChild(cell); document.getElementById("sortList").appendChild(row); //清空输入框 document.getElementById("name").value = ""; } // 删除成员函数 function deleteSort(id) ...{ if (id!=null)...{ var rowToDelete = document.getElementById(id); var sortList = document.getElementById("sortList"); sortList.removeChild(rowToDelete); } } </ script > < table style ="BORDER-COLLAPSE: collapse" bordercolor ="#111111" cellspacing ="0" cellpadding ="2" width ="400" bgcolor ="#f5efe7" border ="0" > < tr > < td align ="middle" height ="4" colspan ="3" > < img height ="4" src ="images/promo_list_top.gif" width ="100%" border ="0" alt ="" > </ td > </ tr > < tr > < td align ="middle" bgcolor ="#dbc2b0" height ="19" colspan ="3" > < b > 成员信息管理 </ b > </ td > </ tr > < tr > < td height ="20" > 增加新成员: </ td > < td height ="20" > < input id ="name" type ="text" size ="15" > </ td > < td height ="20" > < button onclick ="addSort();" > 添加 </ button > </ td > </ tr > < tr > < td height ="20" > 成员信息管理: </ td > </ tr > < table border ="1" width ="400" > < tr > < td height ="20" valign ="top" align ="center" > 成员名称: </ td > < td id ="pos_1" height ="20" > 操作 </ td > </ tr > < tbody id ="sortList" ></ tbody > </ table > </ table > 效果图如下： 原文出处：www.easyjf.com