節點的創建、插入、修改和刪除并不是一個個獨立的操作，而是串聯在一起。

1. 創建節點element=document.createElement(tagName)

首先節點需要通過element=document.createElement(tagName)被創建，也比較好理解，createElement（tagName）和getElementsByTageName的形式差不多，另外，創建節點似乎只能通過tagName，這個html的結構也相似，想在html中創建一個元素也是通過tagname。從DOM樹去考慮，createElement（TagName）就相當于創建了一個節點，即一個樹枝起始的位置。

element.textContent 可以截取出該元素內所有的文本內容。

2. 插入節點

var achild=element.appendChild(achild);

var achild=element.insertBefore(achild,referenceChild)

建立標簽之后，需要通過appendChild插入節點。

var achild=element.appendChild(achild); 在指定的元素后面追加子元素，這里的achild也是一個標簽名，凡是需要插入的標簽都是需要先被建立。

在users這個節點后面插入h2和ul標簽，原有html中id為users的div內部就被插入了h2和il標簽，被插入前需要建立標簽

一般情況下，節點的插入都是按照先后順序的，但是如果想要在指定位置插入標簽，就需要用到：var achild=element.insertBefore(achild,referenceChild);即在指定的子節點前面加入節點。

沒有在指定節點之后插入節點是因為這樣可以保證簡潔。

achild是需要被插入的節點，而referenceChild則是參考點。

先創建，再插入。

3. 刪除節點 child=element.removeChild(child)

child=element.removeChild(child):刪除指定的子節點。可以看到這里是刪除子節點，如果是刪除自己點本身，那么首先需要獲取到該節點，并賦值給一個變量元素，然后通過這個變量獲取到相應的父節點，然后刪除其子節點，也就是他本身。

首先要獲取節點，然后通過父子關系將獲取的節點刪除

4. 插入一段html所有元素：element.innerHTML

申明一個變量li，創建一個li的節點，將該節點的類名命名為“user”，在ul中插入子節點li，并將一段html元素，即圖片和一個內容為lifeng的<a>標簽插入li節點中

5. 總結

首先可以對比一下節點操作的所有表達式：

創建節點 ：

element=document.createElement(tagName)

插入節點 ：

var achild=element.appendChild(achild);

var achild=element.insertBefore(achild,referenceChild)

刪除節點：

child=element.removeChild(child)

插入一段html所有元素：

element.innerHTML

1. 創建節點：針對整個文檔的，可以不需要其他條件即可申明一個變量，然后創建節點賦值給他，例如var li=document.createElement("li")；就創建了一個li標簽的節點，注意：這里變量“li”是在js中的變量，而括號里面的“li”代表著html的<li>標簽。接著可以通過li.className="users"賦予js中li變量代表的<li>以users這個類名。

2. 插入節點：appendChild很能說明是插入子節點，也就是在DOM樹上針對父節點增加分支，為了能夠分支，那一定是要先獲取父節點的。例如：

var users=document.getElementById('users');

var h2=document.createElement('h2');

h2.innerText='hello';

var li=document.createElement('li');

users.appendChild('h2');

users.appendChild('li');

這里的users就是通過Id獲取的父節點，前面舉例的圖中并沒有說明。這個過程就好像，我現在地圖上通過查找高速公路編號找到了一條叫做users的大路（document.getElementById)，然后需要在這條大路兩側規劃出兩條支路，首先我得想好支路的名稱，就叫支路一和支路二，那現在需要再把這兩條支路安插（appendChild）在大路一側。

3. 刪除節點：這個和插入節點不一樣，不需要先創造出子節點，而是要獲取相應的節點，而且注意到是removeChild，即刪除的是子節點。要注意的是，在js里操作一定要明確與html標簽相同的元素其實都是變量，而不是標簽。這樣的話，就要將要改變的html和css的標簽都對應到js中的節點來操作，這個在dom樹里有說過，這里再說一次強化這個概念。

那這么看來，就要分別獲取相對應的父節點和子節點:

var user=document.getElementById('user'); / 獲取id名為user的節點賦值給user變量；

var users2=user.getElementByClassName('users')[1] / 通過user獲取到類名為users的第二個子元素，并賦值給user2，user2就是對應的子節點；

user2.parentNode.removeChild(user2); /刪除user2的父節點的子節點，也就是他本身；

上面這個例子也說明了DOM的一個基本規則，所有的操作都是針對節點，通過節點和html、css的對應關系來影響其結構。所以任何的節點操作，一定要將相應的元素轉換成對應的節點，可以是獲取，可以是創建。