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作用域容易记错的两个地方分析
Jun 22 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
VUE脚手架具体使用方法
May 20 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 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你的验证码安全码?
2007/01/02 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
php中error与exception的区别及应用
2014/07/28 PHP
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
jquery选择器使用详解
2014/04/08 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
详解PyTorch批训练及优化器比较
2018/04/28 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
董事长秘书岗位职责
2013/11/29 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
办公室内勤工作职责
2013/12/11 职场文书
实用求职信范文分享
2013/12/25 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
一年级家长会邀请函
2014/01/25 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
食品安全责任书
2014/04/15 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
2015年元旦活动总结
2014/05/09 职场文书
丧事答谢词大全
2015/09/30 职场文书
如何撰写促销方案?
2019/07/05 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL