要想建立一個元素節點，首先要建立一個新元素，然後在新元素中新增

1、appendChild（）尾部新增

使用步驟：（1）新建型別（2）新增內容（3）組合節點（4）定位節點（5）新增節點

程式碼示範：

<div id="div1">
  <p id="p1">這是第一個初始段落</p>
  <p id="p2">這是第二個初始段落</p>
</div>
<script>
var para = document.createElement("p"); //新建p標籤型別的節點
var content = document.createTextNode("
 
這是一個新建節點"); //為節點新增內容
para.appendChild(content); //組合節點
var position = document.getElementById("div1"); //定位節點
position.appendChild(para); //新增節點
</script>

2、insertBefore（）首部新增

使用步驟：（1）新建型別（2）新增內容（3）組合節點（4）定位大範圍（5）定位小範圍（6）新增節點

程式碼示範：

<div id="div1">
  <p id="p1">這是第一個初始段落</p>
  <p id="
 
p2">這是第二個初始段落</p>
</div>
<script>
var para = document.createElement("p"); //建立p標籤型別的節點
var content = document.createTextNode("這是新新增的節點"); //為節點新增內容
para.appendChild(content); //組合節點
var big_position = document.getElementById("div1"); //定位大範圍
var small_position = document.getElementById("p2
 
"); //定位小範圍
big_position.insertBefore(para,small_position); //新增節點

可以看出，insertBefore（）的還使用方法與appendChild（）截然不同。有兩個引數：（1）是要新增的節點名稱 （2）是節點要新增在哪個元素的前方

3、removeChild（）移除節點

使用步驟：（1）獲取父元素（2）獲取目標元素（3）組合移除

程式碼示範：

<div id="div1">
  <p id="p1">這是第一個初始段落</p>
  <p id="p2">這是將被移除的段落</p>
  <p id="p3">這是第二個初始段落</p>
</div>
<script>
var parent = document.getElementById("div1"); //獲取父元素
var child = document.getElementById("p2"); //獲取目標元素
parent.removeChild(child); //組合刪除

刪除節點必須知道父節點  必須知道

4、replaceChild（）替換節點

使用步驟：（1）獲取父元素（2）獲取目標元素（3）替換

程式碼示範：

<div id="div1">
    <p id="p1">這是一個初始段落</p>
    <p id="p2">這是一個初始段落</p>
    <p id="p3">這是一個初始段落</p>
    <p id="p4">這是一個初始段落</p>
</div>
<script>
    var para = document.createElement("p");
    var content = document.createTextNode("I am fine");
    para.appendChild(content);
    var parent = document.getElementById("div1");
    var child = document.getElementById("p2");
    parent.replaceChild(para,child);

5、NodeList

NodeList物件是一個從文件中獲取的節點列表集合

所有瀏覽器中的childNodess屬性返回的是NodeList物件  大部分瀏覽器querySelectAll屬性返回的是NodeList物件

HTML Collection 與 NodeList的區別

（1）前者是HTML元素的集合，後者是文件節點的集合

（2）都與陣列物件類似，可以使用索引來獲取元素

（3）前者可以通過索引、ID、name來獲取元素，後者只能通過索引

（4）只有NodeList物件包含有屬性節點和文字節點