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

在使用Javascript进行动态的增加和删除元素首先我们需要先创建一个盒子并附上属性设置盒子的长和宽以及线的粗细和颜色<div style="width:300px;height:300px;border:1pxdoublered;" id="div1">div</div>然后将设置我们需要添加和删除的按钮并添加点击事件<input type="button" va

紫星LZ

6906人浏览 · 2021-11-15 22:49:26

紫星LZ · 2021-11-15 22:49:26 发布

在使用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内部创建input
	document.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内部创建input
	document.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>

成品展示为: