DOM操作实例：替换、追加、插入元素-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM</title>
</head>
<body>
	<div id="parentDiv">
		<div id="d1">div1</div>
		<div id="d2">div2</div>
		<div id="d3">div3</div>
	</div>
	<script type="text/javascript">
		function replace(){
			var d4 = document.createElement("div");
			var text = document.createTextNode("第四个div");
			d4.appendChild(text);

			var d3 = document.getElementById("d3");
			var parentDiv = document.getElementById("parentDiv");
			parentDiv.replaceChild(d4,d3);//将d3替换为d4
		}
		function append(){
			var divadd = document.createElement("div");
			var text = document.createTextNode("追加的div");
			divadd.appendChild(text);
			var parenDiv = document.getElementById("parentDiv");
			parentDiv.appendChild(divadd);//追加
		}
		function insert(){
			var divinsert = document.createElement("div");
			var text = document.createTextNode("插入的div");
			divinsert.appendChild(text);
			var parentDiv = document.getElementById("parentDiv");
			var d3 = document.getElementById("d3");
			parentDiv.insertBefore(divinsert,d3);//在d3前面插入divinsert
		}
	</script>
	<button onclick="replace()">替换第三个div</button><br>
	<button onclick="append()">追加div</button><br>
	<button onclick="insert()">第三个div前插入</button><br>
</body>
</html>

dom基础8