javascript动态创建及删除元素的方法

本文实例讲述了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="http://www.jb51.net";
        //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程序设计有所帮助。

赞 (0)

相关推荐

  • JS动态创建DOM元素的方法

    本文实例讲述了JS动态创建DOM元素的方法.分享给大家供大家参考.具体如下: 近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /* 动态创建DOM元素的相关函数支持 */ /* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; }

  • 通过JS动态创建一个html DOM元素并显示

    近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /**//* 动态创建DOM元素的相关函数支持 www.jcodecraeer.com */ /**//* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; } /**//* 获取某个

  • JavaScript动态生成二维码图片

    1.html代码 <div id="qrcode" style="width:200px; height:200px;position: fixed;bottom: 40%; right: 20%;"></div> 2.引入外部js文件 <script src="QRCode.js"></script> 3.方法调用 var qrcode = new QRCode(document.getEleme

  • js 动态创建 html元素

    js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500px; position:relative;} #s{ background:#FFF; width:1px; height:1px; overflow:hidden; position:absolute;} 没事造星星玩 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript元素动态创建实现方法

    本文实例讲述了javascript元素动态创建实现方法.分享给大家供大家参考.具体分析如下: document.write只能在页面加载过程中才能动态创建 可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用元素的appendChild方法将 新创建元素添加到相应的元素下 举例如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e

  • JavaScript动态创建div等元素实例讲解

    JavaScript动态创建div等元素实例讲解

    本文实例讲解了JavaScript动态创建div等元素的详细代码,分享给大家供大家参考,具体内容如下 效果图: 为了节省时间,就直接贴代码了! <html> <head> <title>js动态创建div等元素实例</title> <style type="text/css"> </style> </head> <body> <script language="javascr

  • javascript动态创建及删除元素的方法

    本文实例讲述了javascript动态创建及删除元素的方法.分享给大家供大家参考.具体分析如下: 在DOM中我们可以方便快速的动态删除与删除dom元素,这里我们就来给各位朋友简单的介绍一下. 例1: 动态创建一个按钮 复制代码 代码如下: <html> <head> <title>动态创建按钮</title> <script language="javascript"> var a,b,ab,ba,c; function cr

  • Vue实现动态创建和删除数据的方法

    视图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> //导入vue.js <script type="text/javascript" src="./vue.js"></script> //非常简单了设置了一下css样式 <style typ

  • JavaScript动态创建二维数组的方法示例

    JavaScript动态创建二维数组的方法示例

    本文实例讲述了JavaScript动态创建二维数组的方法.分享给大家供大家参考,具体如下: 学过C语言的我太耿直 一般这种情况下我会直接 var arr = new Array[10][10]; 但是不出意外的话这样是会报错的,因为在js中根本没有这样的语法 在这之前,让我们先来回顾一下js中是怎么样创建一维数组的: 使用数组直接量,这个是最简单的,在方括号内将数组元素用逗号隔开即可: var arr = [ ]; //空数组 var s = [1,2,3,4]; //4个元素的数组 var n

  • 基于dom编程中 动态创建与删除元素的使用

    复制代码 代码如下: <html><head><script type="text/javascript">    function test(){                //createElement()  创建一个指定标签名的元素[比如:动态创建超链接]        var createa=document.createElement("a");        createa.id="a1";  

  • javascript 动态创建表格的2种方法总结

    第一种方法: 复制代码 代码如下: <html>         <head>             <script>                 function createTable(rows,lines){                     this.rows=rows;                     this.lines=lines;                     var Body=document.getElementById

  • jQuery动态添加、删除元素的方法

    复制代码 代码如下: <script> $.schoolFn = { addItem: function(obj){ $("#itemList").append("<li id='liItrm' class='list-group-item clearfix'><span class='glyphicon glyphicon-resize-vertical sort-handle'></span>"+obj+"

  • Javascript动态创建表格及删除行列的方法

    本文实例讲述了Javascript动态创建表格及删除行列的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • JavaScript动态创建form表单并提交的实现方法

    本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下: // JavaScript 构建一个 form function MakeForm() { // 创建一个 form var form1 = document.createElement("form"); form1.id = "form1"; f

  • javascript动态创建链接的方法

    本文实例讲述了javascript动态创建链接的方法.分享给大家供大家参考.具体分析如下: 动态创建链接示例: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态添加链接</title&

随机推荐