本節要用到的html例子
復制代碼 代碼如下:
<ul id="myList">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
1.創建元素節點
document.createElement() 方法 用於創建元素，接受一個參數，即要創建元素的標簽名，返回創建的元素節點
復制代碼 代碼如下:
var div = document.createElement("div"); //創建一個div元素
div.id = "myDiv"; //設置div的id
div.className = "box"; //設置div的class
創建元素後還要把元素添加到文檔樹中
2.添加元素節點
appendChild() 方法 用於向childNodes列表的末尾添加一個節點，返回要添加的元素節點
復制代碼 代碼如下:
var ul = document.getElementById("myList"); //獲得ul
var li = document.createElement("li"); //創建li
li.innerHTML = "項目四"; //向li內添加文本
ul.appendChild(li); //把li 添加到ul子節點的末尾
添加後:
復制代碼 代碼如下:
<ul id="myList">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
<li>項目四</li>
</ul>
appendChild() 方法還可以添加已經存在的元素，會將元素從原來的位置移到新的位置
復制代碼 代碼如下:
var ul = document.getElementById("myList"); //獲得ul
ul.appendChild(ul.firstChild); //把ul的第一個元素節點移到ul子節點的末尾
運行後(IE)：
復制代碼 代碼如下:
<ul id="myList">
<li>項目二</li>
<li>項目三</li>
<li>項目一</li>
</ul>
insertBefore() 方法 ，如果不是在末尾插入節點，而是想放在特定的位置上，用這個方法，該方法接受2個參數，第一個是要插入的節點，第二個是參照節點，返回要添加的元素節點
復制代碼 代碼如下:
var ul = document.getElementById("myList"); //獲得ul
var li = document.createElement("li"); //創建li
li.innerHTML= "項目四"; //向li內添加文本
ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一個子節點前
添加後:
復制代碼 代碼如下:
<ul id="myList">
<li>項目四</li>
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
復制代碼 代碼如下:
var ul = document.getElementById("myList"); //獲得ul
var li = document.createElement("li"); //創建li
li.innerHTML= "項目四"; //向li內添加文本
ul.insertBefore(li,ul.null); //把li添加到ul的子節點末尾
添加後:
復制代碼 代碼如下:
<ul id="myList">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
<li>項目四</li>
</ul>
復制代碼 代碼如下:
var ul = document.getElementById("myList"); //獲得ul
var li = document.createElement("li"); //創建li
li.innerHTML= "項目四"; //向li內添加文本
var lis = ul.getElementsByTagName("li") //獲取ul中所有li的集合
ul.insertBefore(li,lis[1]); //把li添加到ul中的第二個li節點前
添加後:
復制代碼 代碼如下:
<ul id="myList">
<li>項目一</li>
<li>項目四</li>
<li>項目二</li>
<li>項目三</li>
</ul>
3.移除元素節點
removeChild() 方法 ，用於移除節點，接受一個參數，即要移除的節點，返回被移除的節點，注意被移除的節點仍然在文檔中，不過文檔中已沒有其位置了
復制代碼 代碼如下:
var ul = document.getElementById("myList"); //獲得ul
var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一個子節點1 var ul = document.getElementById("myList"); //獲得ul
var lis = ul.getElementsByTagName("li") //獲取ul中所有li的集合
ul.removeChild(lis[0]); //移除第一個li，與上面不同，要考慮浏覽器之間的差異
4.替換元素節點
replaceChild() 方法 ，用於替換節點，接受兩個參數，第一參數是要插入的節點，第二個是要替換的節點，返回被替換的節點
復制代碼 代碼如下:
var ul = document.getElementById("myList"); //獲得ul
var fromFirstChild = ul.replaceChild(ul.firstChild); //替換ul第一個子節點1 var ul = document.getElementById("myList"); //獲得ul;
var li = document.createElement("li"); //創建li
li.innerHTML= "項目四"; //向li內添加文本
var lis = ul.getElementsByTagName("li") //獲取ul中所有li的集合
var returnNode = ul.replaceChild(li,lis[1]); //用創建的li替換原來的第二個li
5.復制節點
cloneNode() 方法，用於復制節點， 接受一個布爾值參數， true 表示深復制（復制節點及其所有子節點）， false 表示淺復制（復制節點本身，不復制子節點）
復制代碼 代碼如下:
var ul = document.getElementById("myList"); //獲得ul
var deepList = ul.cloneNode(true); //深復制
var shallowList = ul.cloneNode(false); //淺復制
節點的操作要注意IE和其它浏覽器的差異（第十八節中有講到）