通過JS的DOM對象，實現元素的動態創建。
二、效果
1 <!DOCTYPE html>
2 <html lang="zh-cn">
3 <head>
4 <meta charset="utf-8">
5 <title>課堂演示</title>
6 <style type="text/css">
7 input{
8 margin: 10px;
9 width: 100px;
10 height: 30px;
11 }
12 </style>
13 </head>
14 <body>
15 <input id="Button2" type="button" value=" 測試" onclick="addInput()"> <br>
16 <script type="text/javascript">
17 var i=0;
18 function addInput(){
19 //使用DOM的創建元素方法
20 var o=document.createElement("input");
21
22 o.type = "button" ;
23
24 o.value = "按鈕" + i++ ;
25
26 o.addEventListener("click",addInput);
27
28 document.body.appendChild(o);
29
30 o = null;//及時解除不再使用的變量引用,即將其賦值為 null;
31 }
32 addInput()
33 </script>
34 </body>
35 </html>
1、15行，調用的函數中大寫字母，addInput()，在script中聲明這個函數的時候i也是大寫
2、16行，如果是css，那么type里面就是text/css，如果是javascript，那么type里面就是text/javascript
3、document對象，文檔對象，這個我需要好好熟悉一下
4、20行、createElement創建元素，如果是input元素，里面的參數就是input
5、22行，對象o直接調用原來input的屬性
6、26行，addEventListener，動態添加事件
7、26行，click事件直接寫的click，而不是onclick
8、26行、addInput，自己調用自己這個函數，叫回調好還是叫遞歸好呢
9、28行，appendChild向dom的body中添加input
10、30行，內存優化，釋放多余對象
四、總結
涉及到的知識點
- createElement() 通過指定名稱創建一個元素，是DOM對象創建元素的方法，創建完元素后，指定元素的類型、值和方法，最后使用“appendChild”方法，將元素添加到body中。
- appendChild() 方法向節點添加最后一個子節點。
- 及時解除不再使用的變量引用,即將其賦值為 null