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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
javascript 函数速查表
Feb 07 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
js实现AI五子棋人机大战
May 28 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
了不起的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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
跟老齐学Python之正规地说一句话
2014/09/28 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
python3 反射的四种基本方法解析
2019/08/26 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
经管应届生求职信
2013/11/17 职场文书
暑假家长评语大全
2014/04/17 职场文书
文明村镇申报材料
2014/05/06 职场文书
党风廉正建设责任书
2015/01/29 职场文书
任命书标准格式
2015/03/02 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
python自动化八大定位元素讲解
2021/07/09 Python