javascript学习DOM2-CFANZ编程社区

javascript学习DOM2

李雨喵 2022-03-20 阅读 50

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<div>
			
			<!--为按钮button加入事件-->
			<button onclick="jiaTu()">添加图片</button>
			<button onclick="shanTu()">删除图片</button>
			
			<!--通过id将图片固定在div上-->
			<div id="imgs"></div>
		
		</div>
		
		<script type="text/javascript">
			
			function jiaTu(){
				//注意：不管是添加元素还是删除元素，都要通过父元素进行操作
				var divJia = document.getElementById("imgs");
				
				//创建图片标签
				var img = document.createElement("img");  
				
				//设置标签属性
				img.setAttribute("src","img/autumn.jpg");
				img.setAttribute("width","200px");
				img.setAttribute("height","200px");
			
				//appendChild(img)为父元素添加一个子节点
				divJia.appendChild(img)
			
			}
			
			//删除标签
			function shanTu(){
				
				//思路：先获得父元素，再获得子元素，通过父元素删除子元素
				var divJian = document.getElementById("imgs")
				
				//parentNode:返回节点的父节点，removeChild(divJian)：删除指定的节点
				divJian.parentNode.removeChild(divJian)
			}
		</script>
	</body>
</html>

0 条评论