通过js动态创建button
一、实例描述
通过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。