前端学习——js操作元素的文档结构方法一

最新推荐文章于 2022-08-14 14:13:13 发布

野生小米椒

最新推荐文章于 2022-08-14 14:13:13 发布

阅读量317

点赞数 1

分类专栏：三大基础语言

本文链接：https://blog.csdn.net/x1037490413/article/details/88956703

版权

三大基础语言专栏收录该内容

144 篇文章 9 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js操作元素的文档结构</title>
		<!--
			js操作HTML文档结构
			   增加节点
			   删除节点
			   第一种方式：使用innerHTNL
			   div.innerHTML=div.innerHTML+"内容"//增加节点
			   div.innerHTML=""//删除所有子节点
			   父节点.removeChild(子节点对象)//删除指定的子节点
		-->
		<script type="text/javascript">
		function testAdd(){
			//获取元素对象
		var showdiv=document.getElementById("showdiv");
			//给div追加上传按钮
			showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file'  value='' /><input type='button' value='删除' onclick='testDelete(this)'/><div/>"//删除的时候避免要多删除一个换行符的步骤，将换行符改成div，div自带换行
	         
			
		}
		function testDelete(btn){
			//获取父级div
			var showdiv=document.getElementById("showdiv");
			//获取要删除的子div
			var cdiv=btn.parentNode;
			//父div删除子div
			showdiv.removeChild(cdiv);
			
		}
			
		</script>
	</head>
	<body>
		<h3>js操作元素的文档结构</h3>
		
		<input type="button" name="" id="" value="继续上传"  onclick="testAdd()"/>
		<hr />
		<div id="showdiv">
			
			
		</div>
	</body>
</html>

野生小米椒

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习——js操作元素的文档结构方法一

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js操作元素的文档结构</title> <!-- js操作HTML文档结构增加节点删除节点第一种方式：使用innerHTNL ...
复制链接

扫一扫

专栏目录