JS操作DOM-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44805105/article/details/110921397

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js操作元素的文档结构</title>
		<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='删除' οnclick='delInp(this)' /></div>";
				
			}
			function delInp(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>