代码示例：
<html>
<head>
<title>案例二</title>
<style type="text/css">
#div1{
border:5px dashed red;
width:350px;
height:250px;
}
</style>
</head>
<body>
<ul id="ul">
<li id="id1">西施</li>
<li id="id2">王昭君</li>
<li id="id3">貂蝉</li>
<li id="id4">杨玉环</li>
</ul>
<hr/>
<input type="button" value="插入元素" onclick="insert();">
<input type="button" value="删除元素" onclick="remove();">
<input type="button" value="替换元素" onclick="replace();">
<input type="button" value="复制元素" onclick="clone();">
<hr/>
<div id="div1">
</div>
<script type="text/javascript">
function insert(){
var ul=document.getElementById("ul");
var id3=document.getElementById("id3");
var li=document.createElement("li");
var text=document.createTextNode("董小宛");
li.appendChild(text);
ul.insertBefore(li,id3);
li.setAttribute("id","id5");
}
function remove(){
var ul=document.getElementById("ul");
/*方法一：通过获取ul的所有子节点，然后通过下标获取对应的子节点
var lis=ul.getElementsByTagName("li");*/
/*
方法二：通过ID来获取想要删掉的子节点。
*/
var li=document.getElementById("id5");
ul.removeChild(li);
}
function replace(){
var ul=document.getElementById("ul");
var lis=ul.getElementsByTagName("li");
var li1=document.createElement("li");
var text=document.createTextNode("东施");
li1.appendChild(text);
ul.replaceChild(li1,lis[1]);
}
function clone(){
var ul=document.getElementById("ul");
var div=document.getElementById("div1");
var ul1=ul.cloneNode(true);
div.appendChild(ul1);
}
</script>
</body>
</html>
效果图：
