添加、刪除、替換以及插入節點的方法

先簡單說下每個方法對應的語句和用法

obj.appendChild(node)　　把新的子節點添加到指定節點（插入新的子節點（元素）），這麼說可能不是很明白，代碼可能更清晰哈！node表示的就是要添加的節點。

 1     // 獲取元素
 2     var div=document.getElementById("div1");
 3     // 創造元素，給元素添加些文字
 4     var p=document.createElement("p");
 5     p.innerHTML="添加1";
 6     var p1=document.createElement("p");
 7     p1.innerHTML="添加2";
 8     var p2=document.createElement("p");
 9     p2.innerHTML="添加3";
10     // 添加到div中
11     div.appendChild(p);
12     div.appendChild(p1);
13     div.appendChild(p2);

但是這個方法只能在父節點的末尾添加元素。那如果我們要在父元素的中間添加怎麼辦呢。w3c又提供了一個方法，就是obj.insertBefore(node,existingnode)。

obj.insertBefore(node,existingnode)　　表示的是在指定的已有子節點之前插入新的子節點。node表示要添加的節點，existingnode表示在其之前插入新節點的子節點。如果未規定，則 insertBefore 方法會在結尾插入。

 1      // 獲取元素
 2     var div=document.getElementById("div1");
 3     // 創造元素，給元素添加些文字
 4     var p=document.createElement("p");
 5     p.innerHTML="添加1";
 6     var p1=document.createElement("p");
 7     p1.innerHTML="添加2";
 8     var p2=document.createElement("p");
 9     p2.innerHTML="添加3";
10     // 添加到div中
11     div.appendChild(p);
12     div.insertBefore(p1,p);
13     div.insertBefore(p2,p1);

insetBefore()也可以說是插入以節點哈！

obj.replaceChild(newnode,oldnode)　　用新節點替換某個子節點。oldnode節點必須是obj元素子節點，他的返回值是一個指向已經被替換的那個子節點的引用指針。

 1     var div=document.getElementById("div1");
 2     // 創建元素，給元素添加些文字
 3     var p=document.createElement("p");
 4     p.innerHTML="添加1";
 5     var p1=document.createElement("p");
 6     p1.innerHTML="添加2";
 7     var p2=document.createElement("p");
 8     p2.innerHTML="添加3";
 9     // 添加到div中
10     div.appendChild(p);
11     div.insertBefore(p1,p);
12     div.insertBefore(p2,p1);
13     // 新創建一個元素
14     var span=document.createElement("span");
15     span.innerHTML="span";
16     // 替換第一個p
17     div.replaceChild(span,p);

如果被插入的元素本身還有子節點，則那些子節點也被插入到目標節點前。

replaceChild()方法也可以用文檔樹上的現有節點去替換另一個現有節點。代碼更能清晰表現出！

 1      // 獲取元素
 2     var div=document.getElementById("div1");
 3     // 創建元素，給元素添加些文字
 4     var p=document.createElement("p");
 5     p.innerHTML="添加1";
 6     var p1=document.createElement("p");
 7     p1.innerHTML="添加2";
 8     var p2=document.createElement("p");
 9     p2.innerHTML="添加3";
10     // 添加到div中
11     div.appendChild(p);
12     div.insertBefore(p1,p);
13     div.insertBefore(p2,p1);
14     // 將p2替換為p
15     div.replaceChild(p,p2);

使用replaceChild()方法的tips：

1. 當 oldnode 被替換時，所有與之相關的屬性內容都將被移除。 
2. newnode 必須先被建立。 

removeChild(node) 　　 刪除子節點（元素），這個就直接上代碼吧！

 1      // 獲取元素
 2     var div=document.getElementById("div1");
 3     // 創建元素，給元素添加些文字
 4     var p=document.createElement("p");
 5     p.innerHTML="添加1";
 6     var p1=document.createElement("p");
 7     p1.innerHTML="添加2";
 8     var p2=document.createElement("p");
 9     p2.innerHTML="添加3";
10     // 添加到div中
11     div.appendChild(p);
12     div.insertBefore(p1,p);
13     div.insertBefore(p2,p1);
14     // 刪除p1
15     div.removeChild(p1);

知識點大概就是這樣。沒什麼難點。不過我在做案例的時候，也碰到了一些問題。就是父元素的問題，之前做添加信息的案例時，發現如果在table中直接寫tr時，然後用table當作父元素，給裡面添加行，會報如下錯誤。

這是因為table裡面直接寫tr，雖然不會報錯，但瀏覽器會給你生成一個tbody，這樣就會導致tr不是table的孩子，就會出現這樣的錯誤，所以要註意父元素是否寫對，其實也可通過子選父，這樣保證了不會出現這樣的錯誤。

在添加元素時也會有這樣的問題。

1     var odiv=document.getElementsByTagName("div");
2     console.log(odiv);
3     var span =document.createElement("span");
4     odiv.appendChild(span);

1     var odiv=document.getElementsByClassName("bx");
2     console.log(odiv);
3     var span =document.createElement("span");
4     odiv.appendChild(span);

這兩種都會出現下列情況。

但是用getElementById和querySelector可以添加成功。

1     var odiv=document.querySelector("div");
2     var odiv=document.getElementById("main");
3     console.log(odiv);
4     var span =document.createElement("span");
5     odiv.appendChild(span);

 是因為getElementsByClassName等返回的數組，要解析才行。

1     var odiv=document.getElementsByClassName("bx")[0];
2     console.log(odiv);
3     var span =document.createElement("span");
4     odiv.appendChild(span);