javascript动态创建及删除元素的方法


Posted in Javascript onDecember 22, 2014

本文实例讲述了javascript动态创建及删除元素的方法。分享给大家供大家参考。具体分析如下:

在DOM中我们可以方便快速的动态删除与删除dom元素,这里我们就来给各位朋友简单的介绍一下。

例1:

动态创建一个按钮

<html> 

<head> 

<title>动态创建按钮</title> 

<script language="javascript"> 

var a,b,ab,ba,c;

function createInputA(){

a = document.createElement("input");  //使用DOM的创建元素方法

a.type = "button" ;                       //设置元素的类型

a.value = "按钮A";                     //设置元素的值

a.attachEvent("onclick",addInputB);    //为控件添加事件

document.body.appendChild(a);             //添加控件到窗体中

//a = null;              //释放对象

}

例2:

<html>

<head>

<script type="text/javascript">

    function test(){        

        //createElement()  创建一个指定标签名的元素[比如:动态创建超链接]

        var createa=document.createElement("a");

        createa.id="a1";

        createa.innerText="连接到百度";

        createa.href="https://3water.com";

        //createa.color="green" ////添加颜色(不要忘记style属性,不然没有效果)

        createa.style.color="green"

        //添加默认位置--body 并且添加子节点

        //document.body.appendChild(createa);

        //放置指定位置

        document.getElementById("div1").appendChild(createa);

    }

    

    function test2(){

        //指定位置删除节点removeChild()

        document.getElementById("div1").removeChild(document.getElementById("a1")); //id 名重复 js只取第一个

    }

</script>

</head>

<body>

<!--动态创建元素-->

<input type="button" value="创建一个a标签" onclick="test()"/><br/>

<input type="button" value="删除创建一个a标签" onclick="test2()"/>

<div id="div1" style="width:400px;height:300px;border:1px solid silver">

</div>

</body>

</html>

动态创建多个表单:

<html>

 <head>

  <script type="text/javascript">

   window.onload = function() {

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

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

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

    

    aBtn.type = "button";

    aBtn.value = "按钮A";

    aBtn.onclick = copyBtn;

    

    bBtn.type = "button";

    bBtn.value = "按钮B";

    bBtn.onclick = copyBtn;

    

    cBtn.type = "button";

    cBtn.value = "按钮C";

    cBtn.onclick = clearCopyBtn;

    

    document.body.appendChild(aBtn);

    document.body.appendChild(bBtn);

    document.body.appendChild(cBtn);

   };

   

   function copyBtn() {

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

    btn.type = "button";

    btn.value = this.value;

    btn.isCopy = true;

    btn.onclick = copyBtn;

    document.body.appendChild(btn);

   }

   

   function clearCopyBtn() {

    var btns = document.getElementsByTagName("input");

    var length = btns.length;

    for (var i = length - 1; i >= 0; i--) {

     if (btns[i].isCopy) {

      document.body.removeChild(btns[i]);

     }

    }

   }

  </script>

 </head>

 <body>

  

 </body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 命名空间以提高代码重用性
Nov 13 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
javascript简单链式调用案例分析
May 10 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 #Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 #Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 #Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 #Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 #Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 #Javascript
javascript中的遍历for in 以及with的用法
Dec 22 #Javascript
You might like
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php 日期时间处理函数小结
2009/12/18 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
Python使用re模块验证危险字符
2020/05/21 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
利用Python优雅的登录校园网
2020/10/21 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
市场部管理制度
2014/02/02 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python