lib/removeOrReplace.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>removeOrReplace</title>
</head>
<body>
	
	<div id="a">年轻人</div>
	<div id="b">老年人</div>

	<div id="c">拉姆</div>
	<div id="d">蕾姆</div>

	<script>
		// 通过 parentNode 获取父元素，然后删除对应的子元素，Node 上
		let diva = document.getElementById('a')
		let divbfc = document.getElementById('b').firstChild

		diva.parentNode.removeChild(diva)
		divbfc.parentNode.removeChild(divbfc)

		console.log(document.body.innerHTML)

		// 通过 parentNode 获取父元素，然后替换对应的子元素，Node 上
		let divc = document.getElementById('c')
		let span = document.createElement('span')
		span.textContent = '486'
		divc.parentNode.replaceChild(span, divc)

		let divd = document.getElementById('d')
		let textNode = document.createTextNode('艾米莉亚')
		divd.parentNode.replaceChild(textNode, divd)

		console.log(document.body.innerHTML)

		// DOM4 为 Element 引入了 replace、remove
		// 替换或删除以后会返回对应节点的引用，此时要注意内存泄漏的问题

	</script>
	
</body>
</html>