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 相关文章推荐
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 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显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
讲解Python中的标识运算符
2015/05/14 Python
python计算auc指标实例
2017/07/13 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
Python多分支if语句的使用
2020/09/03 Python
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
培训主管岗位职责
2014/02/01 职场文书
期末评语大全
2014/05/04 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
工商局调档介绍信
2015/10/22 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android