<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
list-style: none;
}
#main{
border: 1px solid black;
width: 270px;
height: 300px;
float: left;
text-align: center;
}
button{
display: block;
text-align: center;
margin-left:20px ;
margin-top: 10px;
}
li{
display: block;
background-color: lawngreen;
width: 80px;
margin: 5px ;
float: left;
}
</style>
</head>
<body>
<div id="main">
<p>你想去哪个城市？</p>
<div id="city">
<li id="bj">北京</li>
<li>武汉</li>
<li>杭州</li>
</div>
</div>
<div id="main">
<button id="btn1">创建一个"广州"节点,添加到#city下</button>
<button id="btn2">将"广州"节点插入到#bj前面</button>
<button id="btn3">使用"广州"节点替换#bj节点</button>
<button id="btn4">删除#bj节点</button>
<button id="btn5">读取#city内的html代码</button>
<button id="btn6">设置#bj内的html代码</button>
<button id="btn7">用innerHTML实现btn1的效果</button>
</div>
</body>
<script type="text/javascript">
function myClick(idStr,fun){
var btn=document.getElementById(idStr);
btn.onclick=fun;
}
//1.创建一个"广州"节点,添加到#city下
// appendChild()添加子节点。 语法：父节点.appendChild(子节点);添加子节点
myClick("btn1",function(){
//alert("hello");
//1.创建广州节点 <li>广州</li>
//先创建li元素节点
var li=document.createElement("li"); //以标签名作为元素，创建元素节点，返回值返回
//再创建广州文本节点
var gzText=document.createTextNode("广州");
//2.子节点gzText添加到li下
li.appendChild(gzText); // 父节点.appendChild(子节点);
//3.子节点li添加到#city下
//先获取#city节点
var city=document.getElementById("city");
//再添加
city.appendChild(li);
});
//2.将"广州"节点插入到#bj前面
// insertBefore() 在指定的子节点前面插入新的子节点。 语法：父节点.insertBefore(新子节点,旧子节点)
myClick("btn2",function(){
//创建<li>广州</li>
var li=document.createElement("li");
var gzText=document.createTextNode("广州");
li.appendChild(gzText);
//在指定的子节点前面插入新的子节点
var bj=document.getElementById("bj");
var city=document.getElementById("city");
city.insertBefore(li,bj); // 父节点.insertBefore(新子节点,旧子节点)
});
//3.使用"广州"节点替换#bj节点
// replaceChild(li,bj) 替换子节点。语法：父节点.replaceChild(新子节点,旧子节点)
myClick("btn3",function(){
//创建<li>广州</li>
var li=document.createElement("li");
var gzText=document.createTextNode("广州");
li.appendChild(gzText);
//替换子节点
var bj=document.getElementById("bj");
var city=document.getElementById("city");
city.replaceChild(li,bj);
});
//4.删除#bj节点
// removeChild(bj) 删除子节点。语法：父节点.removeChild(子节点)
myClick("btn4",function(){
var bj=document.getElementById("bj");
//var city=document.getElementById("city");
//city.removeChild(bj);
bj.parentNode.removeChild(bj);//bj.parentNode就是获取父元素，不用获取知不知道父元素了
//bj.remove();//直接删除北京节点，
});
//5.读取#city内的html代码
myClick("btn5",function(){
var city=document.getElementById("city");
alert(city.innerHTML);
});
//6.修改#bj内的html代码
myClick("btn6",function(){
var bj=document.getElementById("bj");
bj.innerHTML="上海";
});
//7.用innerHTML实现btn1的效果
myClick("btn7",function(){
var city=document.getElementById("city");
//innerHTML也可以实现DON增删改操作，但一般结合使用
//city.innerHTML += "<li>广州</li>"; //这样直接使用对原内容有影响，不合理
var li=document.createElement("li");
li.innerHTML="广州";
city.appendChild(li);
});
</script>
</html>
