除了使用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"> <img src="images/ok.gif" onclick="addSort();" alt="確認添加"> </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>，在該頁面中當使用者填寫了新增成員的名稱後，單擊確認按鈕，將調用addSort()函數，該函數首先擷取使用者填寫的新增成員資訊，然後依據擷取到的資訊，藉助DOM操作HTML方式產生動態表格。有興趣的朋友可直接複製以上代碼儲存為html檔案，使用瀏覽器直接開啟後就可以看到具體的效果！
