通过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。
版权申明:欢迎转载,但请注明出处
一些博文中有一些参考内容因时间久远找不到来源了没有注明,如果侵权请联系我删除。
在校每年国奖、专业第一,加拿大留学,先后工作于华东师范大学和香港教育大学。
2024-09-05:27岁,宅加太忙,特此在网上找女朋友,vx:fan404006308
AI交流资料群:753014672