通过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. jquery判断页面元素是否存在

    在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

  2. Tomcat下没有编译后的class文件

    输出的路径是否正确: Default output folder: 如果tomcat下还没有classes文件则没有编译好 需要重新引入jar包, clean工程,并重新部署项目. 这样就会在tomc ...

  3. ivew语法中'${}`的用法

  4. PHP接收GET中文参数乱码的原因及解决方案

    方案1: $str = iconv("gb2312","utf-8",$str); 方案2: mb_convert_encoding($str, "u ...

  5. mac终端(terminal)里的快捷键

    Command + K 清屏 Command + T 新建标签 Command +W 关闭当前标签页 Command + S 保存终端输出 Command + D 垂直分隔当前标签页 Command ...

  6. Example of working with a dump.

    Let's say that you are looking at a crash dump, so following the first command from this page you do ...

  7. 【Git 四】一款不错的 Git 客户端

    平常做开发使用 git bash 进行代码提交,一直没有使用过 git 相关的客户端. 直到有次同一分支下两个日志进行代码比较时,bash 返回的结果可视化理解起来比较差. 如果更改的部分比较多,问题 ...

  8. JS动态创建表单post提交

    <script> //@创建表单方法 function post(URL, PARAMS) { var temp = document.createElement("form&q ...

  9. AWK的介绍学习

    第一节.awk的工作流程和基本用法 1.awk介绍 awk是一种报表生成器,就是对文件进行格式化处理的,这里的格式化不是文件系统的格式化,而是对文件内容进行各种"排版",进而格式化 ...

  10. php如何openssl_encrypt加密解密

    最近在对接客户的CRM系统,获取令牌时,要用DES方式加密解密,由于之前没有搞错这种加密方式,经过请教了"百度"和"谷歌"两个老师后,结合了多篇文档内容后,终于 ...