js学习之操作元素的文档结构(一)

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

原创最新推荐文章于 2022-08-14 14:13:13 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #vue.js #html #html5

JavaScript教程专栏收录该内容

28 篇文章

订阅专栏

<html>
	<head>
		<title>js操作元素的文档结构</title>
		<meta charset="UTF-8"/>
		<!--
			js操作HTML文档结构:
				增加节点
				删除节点
				第一种方式：使用innerHTML
					div.innerHTML=div.innerHTML+"内容"//增加节点
					div.innerHTML=""//删除所有子节点
					父节点.removeChild(子节点对象)//删除指定的子节点。
		-->
		<!--声明js代码域-->
		<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>