微信扫一扫打赏支持

通过js动态创建button

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

 

posted @ 2018-04-28 08:32  范仁义  阅读(5003)  评论(0)  编辑  收藏  举报