javascript学习DOM2

2022/3/20 22:29:47

编程Tag： javascript 删除元素 var img 节点学习 dom2 divJian

本文主要是介绍javascript学习DOM2，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!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>

这篇关于javascript学习DOM2的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

javascript学习DOM2

相关编程文章