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 相关文章推荐
JS中获取数据库中的值的方法
Jul 14 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
JS内置对象和Math对象知识点详解
Apr 03 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
zf框架的校验器InArray使用示例
2014/03/13 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
JavaScript执行顺序详细介绍
2013/12/04 Javascript
删除节点的jquery代码
2014/01/13 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
python数据预处理 :数据抽样解析
2020/02/24 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
大学生毕业鉴定
2014/01/31 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
办理信用卡工作证明
2014/09/30 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
档案接收函格式
2015/01/30 职场文书
单位计划生育责任书
2015/05/09 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
MySQL中order by的使用详情
2021/11/17 MySQL
redis复制有可能碰到的问题汇总
2022/04/03 Redis