1.HTML代码
<body>
<div id="total">
<div class="inner">
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
</div>
<div id="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中添加广州</button></div>
</div>
</body>
2.JS代码
<script type="text/javascript">
window.function(){
//创建一个广州节点,添加到#city下
myClick("btn01",function(){
//<li>广州</li>
//创建li元素节点
var li=document.createElement("li");
//创建广州文本节点
var gzTxt=document.createTextNode("广州");
//将gzTxt设置li的子节点
li.appendChild(gzTxt);
//获取id为city的节点
var city=document.getElementById("city");
city.appendChild(li);
});
//将广州节点插入到#bj前面
myClick("btn02", function() {
//创建一个广州
var li=document.createElement("li");
var gzTxt=document.createTextNode("广州");
li.appendChild(gzTxt);
//获取id为bj的节点
var bj=document.getElementById("bj");
//获取city
var city=document.getElementById("city");
city.insertBefore(li, bj);
bj.insertBefore(gz, bj);
});
//使用广州节点替换#bj节点
myClick("btn03", function() {
//创建一个广州
var li=document.createElement("li");
var gzTxt=document.createTextNode("广州");
li.appendChild(gzTxt);
//获取id为bj的节点
var bj=document.getElementById("bj");
//获取city
var city=document.getElementById("city");
city.replaceChild(li, bj);
});
//删除#bj节点
myClick("btn04", function() {
//获取id为bj的节点
var bj=document.getElementById("bj");
//获取city
var city=document.getElementById("city");
city.removeChild(bj);
//若不知道父元素是谁
//bj.parentNode.removeChild(bj);
});
//读取#city内的html代码
myClick("btn05", function() {
//获取city
var city=document.getElementById("city");
alert(city.innerHTML);
});
//设置#bj内的HTML代码
myClick("btn06", function() {
//获取id为bj的节点
var bj=document.getElementById("bj");
bj.innerHTML="富察容音";
});
/*
使用innerHTML也可以完成DOM增删改的相关操作
一般我们会两种方法适合使用
*/
//向city中添加广州
myClick("btn07", function() {
//获取city
var city=document.getElementById("city");
//city.innerHTML+="<li>广州</li>";
//创建一个li
var li=document.createElement("li");
//向li中设置文本
li.innerHTML="广州";
//将li添加到city中
city.appendChild(li);
});
function myClick(idStr,fun){
var btn=document.getElementById(idStr);
btn.fun;
}
};
</script>
3.图片展示