通过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. 1355: [Baltic2009]Radio Transmission

    Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 958  Solved: 659[Submit][Status][Discuss] Description ...

  2. 支付宝SDK集成加密库迁移错误问题

    最近项目中集成了第三方支付,主要有微信支付和支付宝支付,当然这里我主要想说一下关于集成支付宝支付. 首先从支付宝开发者网站上下载下来了SDK以及DEMO,我们就可以根据DEMO进行分析以及集成.支付宝 ...

  3. ng-show ng-hide ng-if的区别

    用途 ng-show ng-hide ng-if三个都可以用来控制页面DOM元素的显示与隐藏. ng-hide条件为true时,隐藏所在元素,false时显示所在元素. ng-show相反,条件为tr ...

  4. 消除textarea的空格de长度值

    在项目中因为用到文本域textarea输入textarea的长度总是显示 25 那是还怀疑textarea自带有value长度? placeholder属性的长度? 那时候想到类似:ul无序列表li元 ...

  5. JavaScript笔记（3）

    •位操作符 所有的按位操作符的操作数都会被转成补码形式的有符号的32位整数. 运算符 用法 描述 按位与(AND) a & b 对于每一个比特位,只有两个操作数相应的比特位都是1时,结果才为1 ...

  6. BZOJ 2724 [Violet 6]蒲公英(分块）

    题意 在线区间众数 思路 预处理出 f[i][j] 即从第 i 块到第 j 块的答案.对于每个询问,中间的整块直接用预处理出的,两端的 sqrtn 级别的数暴力做,用二分查找它们出现的次数.每次询问的 ...

  7. 使用U盘作为启动盘安装ubuntu系统

     一.使用U盘刻录镜像 1.安装之后我们打开软件,点击文件打开,找到我们刚才进行下载的Ubuntu的ISO文件,然后点击打开,完成ISO文件的加载.接着我们插入U盘,点击UltraISO启动选项,然后 ...

  8. python 异步IO-aiohttp与简单的异步HTTP客户端/服务器

    参考链接:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143209814 ...

  9. linux 下查看二进制文件

    查看二进制有以下几种方法: 方法一:hexdump apt-get install libdata-hexdumper-perl 安装好之后就可以直接hexdump your_binary_file ...

  10. Watcher详解 工作机制， Watcher客户端注册、Watcher 服务端注册

    Watcher详解.接口 在 ZooKeeper 中, 接口类 Watcher 用于表示一个标注你的事件处理器,其定义了事件通知相关的逻辑,包含 KeeperState 和 EventType 两个枚 ...