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