JavaScript实例:XML DOM节点的添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JavaScript实例</title>
<style>
li:hover{background-color:#ddd;}
li.select{background-color:#fc0;}
</style>
</head>
<body>
<!-- html注释 -->
<h2>JavaScript实例:XML DOM节点的添加</h2>
<ul>
<li>aaaa</li>
<li>bbbb</li>
</ul>
名称:<input type="text" size="10" name="name" id="mid"/>
<button onclick="doAdd()">添加</button>
<script type="text/javascript">
function doAdd(){
//获取输入框
var input = document.getElementById("mid");
//创建一个li元素节点
var li = document.createElement("li");
//标签中添加内容
li.innerHTML = input.value;
//将li添加到ul内
document.getElementsByTagName("ul")[0].appendChild(li);
}
</script>
</body>
</html>
jQuery实例:节点添加操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery实例</title>
<style>
#did{width:400px;height:300px;border:1px solid #ddd;}
img{border:2px solid #fff;}
img:hover{border:2px solid #f0c;}
img.hover{border:2px solid #f00;}
</style>
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//jQuery的入口程序
$(function(){
//获取mid中的所有img并绑定鼠标点击事件
$("#mid img").click(function(){
//取消所有选中
$("#mid img").removeClass("hover");
//添加属性
$(this).addClass("hover");
});
//获取所有按钮并添加点击事件
$("button").click(function(){
//根据按钮上的字执行对应的操作
switch($(this).html()){
case "前添加":
//获取选中的图片克隆后添加到did中间
$("#mid img.hover").removeClass("hover").clone().prependTo("#did");
//$("#did").prepend($("#mid img.hover"));
break;
case "后添加":
//后添加
$("#mid img.hover").removeClass("hover").clone().appendTo("#did");
break;
case "前删除":
$("#did img:first").remove();
break;
case "后删除":
$("#did img:last").remove();
break;
}
});
});
</script>
</head>
<body>
<h2>jQuery实例:节点添加操作</h2>
<div id="did" style="width:400px;height:300px;border:1px solid #ddd"></div><br/><br/>
<div id="mid">
<img src="./images/1.jpg" width="70"/>
<img src="./images/2.jpg" width="70"/>
<img src="./images/3.jpg" width="70"/>
<img src="./images/4.jpg" width="70"/>
</div>
<br/>
<button>前添加</button>
<button>后添加</button>
<button>前删除</button>
<button>后删除</button>
</body>
</html>
原文：http://www.cnblogs.com/z-e-r-o/p/6237714.html