<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//創(chuàng)建一個廣州節(jié)點,添加到#city下 方法一：
/**
* 1.創(chuàng)建廣州節(jié)點<li>廣州<li>
* --創(chuàng)建li元素節(jié)點
* --創(chuàng)建廣州文本節(jié)點
* 2.添加到#city下
*/
myClick("btn01",function(){
//創(chuàng)建li元素節(jié)點
var li = document.createElement("li");
//創(chuàng)建廣州文本節(jié)點
var gzText = document.createTextNode("廣州");
//將gzText設(shè)置為li的子節(jié)點
li.appendChild(gzText);
//將li添加到#city下
var city = document.getElementById("city");
city.appendChild(li);
});
//將廣州節(jié)點，插入到#bj前面 insertBefore(新節(jié)點，舊節(jié)點)
myClick("btn02",function(){
var li = document.createElement("li");
var gzText = document.createTextNode("廣州");
li.append(gzText);
var bj = document.getElementById("bj");
var city = document.getElementById("city");
city.insertBefore(li,bj);
});
//使用廣州節(jié)點替換#bj節(jié)點 replaceChild(新節(jié)點，舊節(jié)點)
myClick("btn03",function(){
var li = document.createElement("li");
var gzText = document.createTextNode("廣州");
li.append(gzText);
var bj = document.getElementById("bj");
var city = document.getElementById("city");
city.replaceChild(li,bj);
});
//刪除#bj節(jié)點 removeChild(子節(jié)點)
myClick("btn04",function(){
var bj = document.getElementById("bj");
// var city = document.getElementById("city");
// city.removeChild(bj);
//當不知道bj的父節(jié)點是誰時
bj.parentNode.removeChild(bj);
});
//讀取#city內(nèi)的HTML代碼
myClick("btn05",function(){
var city = document.getElementById("city");
alert(city.innerHTML);
});
//設(shè)置#bj內(nèi)的HTML代碼
myClick("btn06",function(){
var bj = document.getElementById("bj");
bj.innerHTML = "深圳";
});
//向#city中添加廣州節(jié)點 方法二
myClick("btn07",function(){
var city = document.getElementById("city");
// city.innerHTML += "<li>廣州</li>"? //這種方法是將原來的刪掉再重新與新的拼接起來，改動太大，不推薦使用
//方法一 方法二結(jié)合起來的辦法：
var li = document.createElement("li");
li.innerHTML = "廣州";
city.appendChild(li);
});
};
function myClick(btn,fun){
var btn = document.getElementById(btn);
btn.onclick = fun;
}
</script>
</head>
<body>
<div id="total">
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>南京</li>
<li>西安</li>
</ul>
</div>
<div class="" id="btnList">
<button type="button" id="btn01">創(chuàng)建一個廣州節(jié)點,添加到#city下</button>
<br><button type="button" id="btn02">將廣州節(jié)點，插入到#bj前面</button>
<br><button type="button" id="btn03">使用廣州節(jié)點替換#bj節(jié)點</button>
<br><button type="button" id="btn04">刪除#bj節(jié)點</button>
<br><button type="button" id="btn05">讀取#city內(nèi)的HTML代碼</button>
<br><button type="button" id="btn06">設(shè)置#bj內(nèi)的HTML代碼</button>
<button type="button" id="btn07">創(chuàng)建一個廣州節(jié)點,添加到#city中</button>
</div>
</body>
</html>
效果如下：
