通过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. Swift学习笔记（3）：基本运算符

    目录: 运算符 元组比较 空和运算符 区间运算符 运算符 +, -, *, /, %, =, +=, -=, *=, /= 算术运算符 >, <, ==, >=, <=, != ...

  2. 2018年湘潭大学程序设计竞赛 maze(bfs)

    链接:https://www.nowcoder.com/acm/contest/105/F来源:牛客网 有q个单向传送阵,每个传送阵各有一个入口和一个出口,入口和出口都在迷宫的格子里,当走到或被传送到 ...

  3. UI Framework-1: Aura Client API

    Client API The Aura Client API is an API Aura uses to communicate with the client application using ...

  4. bzoj 2259: [Oibh]新型计算机 最短路 建模

    Code: #include<cstdio> #include<cstring> #include<algorithm> #include<queue> ...

  5. java编程思想--学习心得

    学习Java编程思想,需要了解语言特性,对于各种名词,能够借助项目代码,解释其含义,不借助搜索工具,明白其在什么样场景下使用,会带来什么样的问题,能否避免这类问题. 学习的过程,与软件开发相同,一样是 ...

  6. mysql-5.7.25安装及常用语法

    我下的是免安装版的压缩文件包,可以选择下载.msi的程序包,那样就可以通过常见的图形界面来进行安装配置了 参考链接:https://blog.csdn.net/qq_23994787/article/ ...

  7. [JLOI2015]装备购买（线性基）

    [JLOI2015]装备购买 题目描述 脸哥最近在玩一款神奇的游戏,这个游戏里有 nn 件装备,每件装备有 \(m\) 个属性,用向量 \(\mathbf{z_i}\)=\((a_1, \ldots ...

  8. [Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream

    Rather than using Components to push streams into other Components, mapPropsStream allows you to cre ...

  9. Thinking in UML 学习笔记（三）——UML核心视图之类图

    类图的作用:用于展示系统中的类及其相互之间的关系. UML在解决面向对象的方法中对类理解为三个层次,各自是:概念层.说明层.实现层.在UML中,从開始的需求到终于设计类,类图也是环绕这三个层次的观点进 ...

  10. 泛泰A820L (高通MSM8660 cpu) 3.4内核的CM10.1(Android 4.2.2) 測试版第二版

    欢迎关注泛泰非盈利专业第三方开发团队 VegaDevTeam  (本team 由 syhost suky zhaochengw(z大) xuefy(大星星) tenfar(R大师) loogeo cr ...