使用Javascript动态添加和删除元素

在使用Javascript进行动态的增加和删除元素

首先我们需要先创建一个盒子并附上属性设置盒子的长和宽以及线的粗细和颜色

<div style="width:300px;height:300px;border:1px  double  red;" id="div1">div</div>

然后将设置我们需要添加和删除的按钮并添加点击事件

<input type="button" value="增加按钮" onclick="createButton()" >
<input type="button" value="删除按钮" onclick="deleteButton()" >
<input type="button" value="增加链接" onclick="createLink()" >
<input type="button" value="删除链接" onclick="deleteLink()" >

接下来使用js进行动态添加删除

先试用js创建一个新的按钮并赋值上属性

function createButton(){//alert("获得");//创建新的 input按钮var all = document.createElement("input");//给元素添加属性all.type="button";all.value="确定";all.id="did";

接下来获取到当前的div并在div内部使用appendChild()添加在js里创建的input

//获得当前div并在div内部创建inputdocument.getElementById("div1").appendChild(all);

接下来是删除

在获取到元素div时找到div内部创建的input使用removeChild()删除接节点

/*删除按钮  */function deleteButton(){var ss=document.getElementById("did");document.getElementById("div1").removeChild(ss); }

添加链接和删除链接与上面的步骤一样

完整代码为:

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<!-- 动态添加与删除 -->
<script type="text/javascript">
/* 创建按钮 */
//创建函数
function createButton(){//alert("获得");//创建新的 input按钮var all = document.createElement("input");//给元素添加属性all.type="button";all.value="确定";all.id="did";//获得当前div并在div内部创建inputdocument.getElementById("div1").appendChild(all);}/*删除按钮  */function deleteButton(){var ss=document.getElementById("did");document.getElementById("div1").removeChild(ss); }/* 获得链接 */function createLink(){//创建新的链接var ajj = document.createElement("a");ajj.href="https://www.baidu.com/?tn=88093251_75_hao_pg";ajj.id="ai";ajj.style.color="red";//给a标签赋予名字ajj.innerText="百度";//获取当前div并创建新链接document.getElementById("div1").appendChild(ajj);}//删除链接
function deleteLink(){document.getElementById("div1").removeChild(document.getElementById("ai"));
}</script><body>
<input type="button" value="增加按钮" onclick="createButton()" >
<input type="button" value="删除按钮" onclick="deleteButton()" >
<input type="button" value="增加链接" onclick="createLink()" >
<input type="button" value="删除链接" onclick="deleteLink()" >
<div style="width:300px;height:300px;border:1px  double  red;" id="div1">div</div></body>
</html>

成品展示为:

使用Javascript动态添加和删除元素相关推荐

js进阶 9-11 select选项框如何动态添加和删除元素
js进阶 9-11 select选项框如何动态添加和删除元素一.总结一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...
java list遍历添加元素_【转】：java遍历List时动态添加和删除元素
遍历元素最常见的三种方法: // 1.最普通的一种方式 for(int i = 0;i < size;i++) //2.for each方式 for(BEAN b: BEANLIST) //3. ...
js动态添加修改删除元素
事件委托:e.target 核心:1.通过事件冒泡给子元素添加事件,控制新生成的元素进行操作 2.减少DOM元素操作,只需要绑定一个父元素就可以,不用循环遍历每一个子元素进行绑定事件操作,提高程序性能 ...
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（推荐七）
前言学习是有趣的,但有过滤的学习内容就更好,本博主就专门为刚接触javascript客户端编程的朋友提供及分享个人学习经历!建议大家看看:(汤姆大叔的博客) http://www.cnblogs.c ...
JavaScript学习笔记：动态添加与删除表格行
文章目录一.添加表格行与单元格二.动态删除表格行与单元格三.案例演示1 四.案例演示2 一.添加表格行与单元格 Javascript可以控制table,动态的插入行和单元格.rows保存着< ...
javaScript动态添加Li元素
html代码块 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
JavaScript学习（六）——表格的动态添加与删除
JavaScript学习(六)--表格的动态添加与删除基本页面首先是去创建一个基本页面,上面有一个表格来展示信息 <div><input id="id" ty ...
【javascript 动态添加数据到 HTML 页面】
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...
layui 表单动态添加、删除input框
html部分 <div class="layui-form-item" ><label class="layui-form-label"> ...
原生态JS和JQuery版的动态添加、删除表格行
过了太久,JQuery都生疏了,闲来没事,写着玩玩. 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). >原生态 ...

使用Javascript动态添加和删除元素

使用Javascript动态添加和删除元素相关推荐

最新文章

热门文章