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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
js 加载时自动调整图片大小
May 28 Javascript
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
详解JavaScript执行模型
Nov 16 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 批量删除 sql语句
2009/06/05 PHP
PHP中防止SQL注入实现代码
2011/02/19 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
Zabbix实现微信报警功能
2016/10/09 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
宿舍使用违章电器检讨书
2014/01/12 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
单位活动策划方案
2014/08/17 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
大学生支教感言
2015/08/01 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL