通过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