JavaScript实例:XML DOM节点的添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JavaScript实例</title>
<style>
#did{width:400px;height:300px;border:1px solid #ddd;}
img{border:2px solid #fff;}
img:hover,#mid{border:2px solid red;}
</style>
</head>
<body>
<!-- html注释 -->
<h2>JavaScript实例:XML DOM节点的添加</h2>
<div id="did"></div>
<img src="./images/66.jpg" width="70"/>
<img src="./images/77.jpg" width="70"/>
<img src="./images/88.jpg" width="70"/>
<img src="./images/99.jpg" width="70"/><br/><br/>
<button onclick="dofun(1)">前添加</button>
<button onclick="dofun(2)">后追加</button>
<button onclick="dofun(3)">前删除</button>
<button onclick="dofun(4)">后删除</button>
<button onclick="dofun(5)">替换</button>
<script type="text/javascript">
//获取上面的图片并添加点击事件
var list = document.getElementsByTagName("img");
for(var i=0;i<list.length;i++){
list[i].onclick = function(){
this.setAttribute("id","mid");
}
}
//处理函数
function dofun(m){
//获取div和要处理的图片
var did = document.getElementById("did");
var mid = document.getElementById("mid");
if(mid!==null){
//删除mid的id属性节点
mid.removeAttribute("id");
//克隆mid节点
var ob = mid.cloneNode();
}
//根据产生m的值执行对应的操作
switch(m){
case 1: //前添加
did.insertBefore(ob,did.firstChild); break;
case 2: //后添加
did.appendChild(ob); break;
case 3: //前删除
did.removeChild(did.firstChild); break;
case 4: //后删除
did.removeChild(did.lastChild); break;
case 5:
did.replaceChild(ob,did.lastChild); break;
}
}
</script>
</body>
</html>
<!DOCTYPE html>
