JS文档操作-优快云博客

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js操作元素的文档结构2</title>
		<script type="text/javascript">
			function testOper2(){
				//获取元素对象
				var showdiv=document.getElementById("showdiv");
				//创建input元素对象
				var inp=document.createElement("input");
				inp.type="file";
				//创建按钮元素对象
				var btn=document.createElement("input");
				btn.type="button";
				btn.value="删除";
				btn.onclick=function(){
					showdiv.removeChild(inp);
					showdiv.removeChild(btn);
					showdiv.removeChild(br);
				}
				
				//创建换行符
				var br=document.createElement("br");
				//将创建的元素对象存放到div中
				showdiv.appendChild(inp);
				showdiv.appendChild(btn);
				showdiv.appendChild(br);
			}
			
		</script>
	</head>
	<body>
		<h3>js操作文档结构2</h3>
		<input type="button" name="" id="" value="继续上传" onclick="testOper2()"/>
		<hr />
		<div id="showdiv">
			
		</div>
	</body>
</html>