JS實例—DOM的增刪改
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* *{
margin:0;
padding:0;
}*/
#total{
width:400px;
border:1px solid black;
margin:0 auto;
}
#city li{
list-style: none;
float: left;
margin-left:20px;
margin-bottom: 20px;
border:1px solid black;
background-color: #ff6700;
}
/*解決高度塌陷問題*/
.clearfix::before,.clearfix::after{
Content:"";
Display:table;
Clear:both
}
.btnList button{
margin-top: 20px;
width:300px;
}
</style>
</head>
<body>
<div id="total" class="clearfix">
<div id="inner">
<p>你喜歡哪個城市？</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>天津</li>
<li>杭州</li>
</ul>
</div>
</div>
<div class="btnList">
<div><button id="btn01"> 創建一個「廣州」節點添加到#city下</button></div>
<div><button id="btn02">將「廣州」節點插入到#bj前面</button></div>
<div><button id="btn03">使用「廣州」節點替換#bj節點</button></div>
<div><button id="btn04">刪除#bj節點</button></div>
<div><button id="btn05">讀取#city內的HTML程式碼</button></div>
<div><button id="btn06">設置#bj內的HTML程式碼</button></div>
<div><button id="btn07">向city中添加廣州-方法1</button></div>
<div><button id="btn08">向city中添加廣州-方法2</button></div>
</div>
</body>
</html>
<script>
function myClick(idStr,fun) {
var btn=document.getElementById(idStr);
btn.onclick=fun;
}
//創建一個「廣州」節點添加到#city下
myClick("btn01",function () {
//創建廣州節點<li>廣州</li>
//創建li元素節點
var li=document.createElement("li");
//創建文本節點
var cityText=document.createTextNode("廣州");
//將廣州子節點添加到li中
li.appendChild(cityText);
//獲取id為city的節點
var city=document.getElementById("city");
//將廣州添加到city下
city.appendChild(li);
});
//將「廣州」節點插入到#bj前面
//先綁定按鈕2
myClick("btn02",function () {
//創建一個廣州節點
var li=document.createElement("li");
var cityText=document.createTextNode("廣州");
li.appendChild(cityText);
//獲取北京的節點id,必須父節點調用
// 用法： 舊節點的父節點.insertBefore(新節點，舊節點)
var bj=document.getElementById("bj");
var city=document.getElementById("city");
city.insertBefore(li,bj);
});
//使用「廣州」節點替換#bj節點
myClick("btn03",function () {
//創建一個廣州節點
var li=document.createElement("li");
var cityText=document.createTextNode("廣州");
li.appendChild(cityText);
//獲取北京節點和其父節點
var bj=document.getElementById("bj");
var city=document.getElementById("city");
//替換北京節點
// 用法： 舊節點的父節點.replaceChild(新節點，舊節點)
city.replaceChild(li,bj);
});
// 刪除#bj節點
myClick("btn04",function () {
var bj=document.getElementById("bj");
var city=document.getElementById("city");
// 用法： 父節點.removeChild(刪除子節點);
//方法一：city.removeChild(bj);
//方法二： 子節點.parentNode.removeChild(子節點); 子節點的父輩節點
bj.parentNode.removeChild(bj);
});
// 讀取#city內的HTML程式碼
myClick("btn05",function () {
var city=document.getElementById("city");
alert(city.innerText);
});
//設置#bj內的HTML程式碼
myClick("btn06",function () {
var bj=document.getElementById("bj");
bj.innerHTML="東京";
});
//向city添加廣州，使用innerHTML也可以進行DOM的增刪改
//反觀第一種方法，這種方法更好，但動作太大，所有節點重新設置
myClick("btn07",function () {
var city=document.getElementById("city");
city.innerHTML+="<li>廣州</li>";
});
//向city添加廣州 折中的方法---推薦使用！！！！！
myClick("btn08",function () {
var city=document.getElementById("city");
var li=document.createElement("li");
//向li中設置文本
li.innerHTML="廣州";
//將li添加到city中
city.appendChild(li);
});
</script>
