dom基础8

素颜马尾好姑娘i 2022-05-01 12:12 175阅读 0赞

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