首頁 > 開發者 > JavaScript
標籤：
範例程式碼
<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. 刪除後的頁面
通過JavaScript動態產生html控制項
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
