DOM操作实例：删除与恢复节点-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43293451/article/details/91431345

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM</title>
</head>
<body>
	<script>
		function remove(){
			var parentDiv = document.getElementById("parentDiv");
			var div2 = document.getElementById("div2");
			parentDiv.removeChild(div2);//删除元素节点
		}
		function removeHref(){
			var link = document.getElementById("link");
			link.removeAttribute("href");//删除属性节点
		}

		function removeDiv1(){
			var div = document.getElementById("div");
			var textNode = div.childNodes[0];//获得文本节点
			div.removeChild(textNode);//删除文本节点
		}
		function removeDiv2(){
			var div = document.getElementById("div");
			div.innerHTML = "";//内容置空
		}
		function recover(){
			var div = document.getElementById('div');
			div.innerHTML = "这是一个恢复的文本";
		}
	</script>
	<div id = "parentDiv">
		<div id="div1">div1</div>
		<div id="div2">div2</div>
	</div>
	<button onclick="remove()">删除节点</button>

	<br>
	<a href="http://12306.com" id="link">http://12306.com</a><br>
	<button onclick="removeHref()">删除超链接href属性</button><br>

	<br>
	<div id="div">这是一个文本</div>	
	<button onclick="removeDiv1()">通过removeChild删除div下的文本节点</button>
	<button onclick="removeDiv2()">通过innerHTML让内容置空</button>
	<button onclick="recover()">回复文本</button>
</body>
</html>

dom基础7