示例代碼
<html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> <title>動態生成控件</title> <script> var i=1; function add() { var top = document.getElementById("top"); var div = document.createElement("div"); var input = document.createElement("input"); var del = document.createElement("input"); div.innerHTML="學生" + i + " "; div.id = i; input.type = "text"; input.name = "v"; input.value = "jihite"; input.id = "v" + i; del.type = "button"; del.name = "d"; del.value = "刪除"; del.id = 'd' + i; del.onclick = function remo() { alert("刪除學生：" + input.value); top.removeChild(div); }; i = i + 1; div.appendChild(input); div.appendChild(del); top.appendChild(div); } </script> </head> <body> <div> <input type="button" onclick="add()" value="添加" /> </div> <div id="top"> </div> <div id="output"> </div> </body> </html>
效果
1. 開始頁面
2. 點擊添加按鈕
3. 修改學生姓名
4. 點擊刪除
5. 刪除后的頁面
