通过js动态创建button

一、实例描述

通过JS的DOM对象，实现元素的动态创建。

二、效果

三、代码

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="utf-8">

     <title>课堂演示</title>

     <style type="text/css">

      input{

       margin: 10px;

       width: 100px;

       height: 30px;

     }

     </style>

 </head>

 <body>

     <input id="Button2" type="button" value=" 测试" onclick="addInput()"> <br>

     <script type="text/javascript">

         var i=0;

         function addInput(){

             //使用DOM的创建元素方法

             var o=document.createElement("input"); 

             o.type = "button" ; 

             o.value = "按钮" + i++ ;

             o.addEventListener("click",addInput);   

             document.body.appendChild(o);

             o = null;//及时解除不再使用的变量引用,即将其赋值为 null;

         }

         addInput()

     </script>

 </body>

 </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。

通过js动态创建button的更多相关文章

  1. 用JS动态创建登录表单，报了个小错误

    后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...

  2. UEditor js动态创建和textarea中渲染【原】

    UEditor动态创建和textarea中渲染 http://ueditor.baidu.com/website/examples/textareaDemo.html <!DOCTYPE> ...

  3. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  4. js动态创建及移除div的方法

    本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  5. js动态创建样式: style 和 link

    js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...

  6. JS动态创建Table,Tr,Td并赋值

    JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...

  7. js 动态创建变量

      js 动态创建变量 CreationTime--2018年7月2日15点04分 Author:Marydon 1.实现方式 通过eval()实现 2.代码实现 /** * 声明一个函数 * @ex ...

  8. js动态创建的select2标签样式加载不上解决办法

    js动态创建的select2标签样式加载不上:调用select2的select2()函数来初始化一下: js抛出了Uncaught query function not defined for Sel ...

  9. 给js动态创建的对象绑定事件

    1.使用原生JS动态为动态创建的对象绑定事件 1-1.创建一个function,用来兼容IE8以下浏览器添加事件 function addEvent(el, type, fn) {  if(el.ad ...

随机推荐

  1. POJ 3672 水题......

    5分钟写完 水水更开心 //By SiriusRen #include <cstdio> #include <iostream> #include <algorithm& ...

  2. Metasploit的攻击实例讲解----ms10_046快捷方式图标漏洞

    不多说,直接上干货! 准备工具 1.Kali linux 2016.2(Rolling)系统  IP:  192.168.1.103 2.受害者机子(windows XP系统)   IP: 10.10 ...

  3. 003.ES2015和ES2016新特性--类.md

    JavaScript使用的是基于原型的OO模型,用对象字面量或者函数来实例化对象,用原型链来实现继承. 这样对于数据传统C++.Java的OO范式的开发者来说,会感到比较困惑,于是从ES2015开始逐 ...

  4. Servlet设置Cookie无效

    项目中保存用户信息用到了Cookie,之前没有太注意,今天怎么设置Cookie都无效,断点跟了无数遍,都没有找出问题所在,明明发送Cookie的代码都有执行,可是愣是找不到Cookie发送到哪里去了, ...

  5. Android 代码中使用Color工具类 parseColor

    方式一: arg1.setBackgroundColor(Color.parseColor("#87CEFA")); 方式二: arg1.setBackgroundColor(ge ...

  6. TPC-C测试

    TPC发布的测试标准之一,是专门针对联机事务处理系统(OLTP)的测试标准.1992年发布1.0版本.最新版本5.11,2010年发布. 测试规范中模拟了一个比较复杂并具有代表意义的OLTP应用环境, ...

  7. myisam和innodb的qubie

    1.Myisam 支持锁表,innoDB 支持行锁. 2.innoDB 和 BDB 支持事务. 3.Myisam 与 innoDB 索引的区别:      Myisam 无论是主键索引还是其他索引,索 ...

  8. JavaScript设计模式(biaoyansu)

    1.构造器模式——创建类模式   ES6:class Student{ constructor(score,quality){ this.score = score this.quality = qu ...

  9. gitHub上如何设置或者取消电子邮箱提醒

    原文链接:点我 我们正常注册的gitHub一般应该都是电子邮箱的方式,在注册账号时可能选择或者默认给了各种提醒,但是gitHub的邮箱提醒真的就比较烦人了,特别是最近团队开发项目,什么动态都有提醒,就 ...

  10. CF19E Fairy(树上差分）

    题目描述 很久很久以前,有一个仙女叫做A.有一天一个少年B找到她,并且请求她预测他的未来.仙女看着她的水晶球,说这位少年不久将遇见世界上最美丽的公主,并且将迎娶她为妻.然后仙女在一张纸上画了n个点,并 ...