<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//创建一个广州节点,添加到#city下 方法一：
/**
* 1.创建广州节点<li>广州<li>
* --创建li元素节点
* --创建广州文本节点
* 2.添加到#city下
*/
myClick("btn01",function(){
//创建li元素节点
var li = document.createElement("li");
//创建广州文本节点
var gzText = document.createTextNode("广州");
//将gzText设置为li的子节点
li.appendChild(gzText);
//将li添加到#city下
var city = document.getElementById("city");
city.appendChild(li);
});
//将广州节点，插入到#bj前面 insertBefore(新节点，旧节点)
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);
});
//使用广州节点替换#bj节点 replaceChild(新节点，旧节点)
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节点 removeChild(子节点)
myClick("btn04",function(){
var bj = document.getElementById("bj");
// var city = document.getElementById("city");
// city.removeChild(bj);
//当不知道bj的父节点是谁时
bj.parentNode.removeChild(bj);
});
//读取#city内的HTML代码
myClick("btn05",function(){
var city = document.getElementById("city");
alert(city.innerHTML);
});
//设置#bj内的HTML代码
myClick("btn06",function(){
var bj = document.getElementById("bj");
bj.innerHTML = "深圳";
});
//向#city中添加广州节点 方法二
myClick("btn07",function(){
var city = document.getElementById("city");
// city.innerHTML += "<li>广州</li>" //这种方法是将原来的删掉再重新与新的拼接起来，改动太大，不推荐使用
//方法一 方法二结合起来的办法：
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">创建一个广州节点,添加到#city下</button>
<br><button type="button" id="btn02">将广州节点，插入到#bj前面</button>
<br><button type="button" id="btn03">使用广州节点替换#bj节点</button>
<br><button type="button" id="btn04">删除#bj节点</button>
<br><button type="button" id="btn05">读取#city内的HTML代码</button>
<br><button type="button" id="btn06">设置#bj内的HTML代码</button>
<button type="button" id="btn07">创建一个广州节点,添加到#city中</button>
</div>
</body>
</html>
效果如下：
