通过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. 修改host方法

    打开路径 C:\Windows\System32\drivers\etc 将hosts文件拷贝出来修改之后放回去覆盖即可 以下是一个例子,想得到ip可以先ping一下那个域名. 左边是ip,右边是域名 ...

  2. sql server 中查询数据库下有多少张表以及同义词等信息

    --查询数据库有多少张表SELECT count(0) from sysobjects where xtype = 'u' 复制代码 解释:sysobjects系统对象表. 保存当前数据库的对象.如约 ...

  3. HDU-1032 The 3n+1 problem 模拟问题（水题）

    题目链接:https://cn.vjudge.net/problem/HDU-1032 水题 代码 #include <cstdio> #include <algorithm> ...

  4. bzoj2124 等差子序列（树状数组+hash）

    题意 给你一个1~n排列,问有没有一个等差数列(长度至少为3) 题解 我居然自己想到了正解. 但我最后写挂了,所以我又看了题解. 我们维护了一个以权值为下标的01序列. 我们扫描整个序列.对于每一个正 ...

  5. 移动端 Modal 组件开发杂谈

    Vant 是有赞开发的一套基于 Vue 2.0 的 Mobile 组件库,在开发的过程中也踩了很多坑,今天我们就来聊一聊开发一个移动端 Modal 组件(在有赞该组件被称为 Popup )需要注意的一 ...

  6. python中的装饰器decorator

    python中的装饰器 装饰器是为了解决以下描述的问题而产生的方法 我们在已有的函数代码的基础上,想要动态的为这个函数增加功能而又不改变原函数的代码 例如有三个函数: def f1(x): retur ...

  7. 题解 P1179 【数字统计】

    嚯嚯嚯,这道题很显然是削弱版的51nod P1042. 那么显然我们需要使用数位DP解题. 思路大致是这样的: 对于每一个数字,考虑三种影响关系: 1. 它对低位的影响 2. 它对高位的影响 3. 高 ...

  8. MyBatis学习总结（10）——批量操作

    一.mybatis中的批量操作    批量操作核心就是一次传入多个数据然后进行相关操作,增删改查中掌握其中一个其他的也不成问题 1.最新在做的短信平台,要批量插入群发的短信记录: 当然批量操作还有:批 ...

  9. Rsyslog比较详细的

    http://blog.csdn.net/fishmai/article/details/51842340

  10. typedef 与 set_new_handler的几种写法

    可以用Command模式.函数对象来代替函数指针,获得以下的好处: 1. 可以封装数据 2. 可以通过虚拟成员获得函数的多态性 3. 可以处理类层次结果,将Command与Prototype模式相结合 ...