<ul id="ul1">
<li id="li1">111</li>
<li id="li2">222</li>
<li id="li3">333</li>
<li id="li4">444</li>
</ul>
<div id="div1"></div>
<br />
<input type="button" onclick="insert1();" value="insert" />
<input type="button" onclick="remove1();" value="remove" />
<input type="button" onclick="replace1();" value="replace" />
<input type="button" onclick="cloneNode1();" value="clone" />
<script type="text/javascript">
/*操作DOM樹
insertBefore(newNode,oldNode):在節點之前加入新節點
removeChild(delNode):通過父節點刪除子節點,不能自己刪除自己
replaceChild(newNode,oldNode):替換節點 第一個參數：替換成的節點，第二個參數：被替換的節點 必須使用父節點進行替換，不能自己替換自己
cloneNode(boolean):是否復制，是true，否，FALSE
*/

function insert1() {
//獲得ul根節點
var ul1 = document.getElementById("ul1");
//創建li
var li5 = document.createElement("li");
//創建文本
var text5 = document.createTextNode("555");
//把文本添加到li下面
li5.appendChild(text5);
//獲得同級li
var li4 = document.getElementById("li4");
//把li添加到ul下面 insertBefore(newNode,oldNode);在節點之前加入新節點
ul1.insertBefore(li5, li4);

}

function remove1() {
//獲得需要刪除的節點
var li3 = document.getElementById("li3");
//獲得ul根節點,2種方式
var ul1 = document.getElementById("ul1");
var ul2 = li3.parentNode;

//通過父節點刪除子節點,不能自己刪除自己
ul2.removeChild(li3);
}

function replace1() {

//獲得根節點
var ul = document.getElementById("ul1");
//獲得被替換的li子節點
var li2 = document.getElementById("li2");
//創建li標簽
var li5 = document.createElement("li")
//創建新的li文本
var text5 = document.createTextNode("yyy");
//把文本添加到li下面
li5.appendChild(text5);
//replaceChild(newNode,oldNode)方法，替換節點 第一個參數：替換成的節點，第二個參數：被替換的節點 必須使用父節點進行替換，不能自己替換自己
ul.replaceChild(li5, li2);

}

function cloneNode1(){
/*
1、獲得ul
2、執行復制方法cloneNode方法復制true
3、把復制之後的內容放到div裏面去
獲取到div
appendChild方法
*/
//獲得根節點
var ul=document.getElementById("ul1");
//執行復制方法,復制ul
var ulcopy=ul.cloneNode(true);
//把復制之後的內容放到div裏面
var div1=document.getElementById("div1");
div1.appendChild(ulcopy);
}
</script>

JS--操作DOM樹