node 物件提供了一些用於向 html 頁面插入節點的方法，通過這些方法我們可以實現向 html 頁面新增元素，或者移動 html 頁面中的元素。
var parent = document.getelementbyid('parent');
var button = document.createelement('button');
button.setattribute('class','button');
var text = document.createtextnode('a new button');
// 將新節點新增到父節點中
值得注意的是:如果我們是將 html 頁面中原有的節點插入到指定節點的子節點列表的最後面，那這個被插入的節點會先從原有的位置移除，再插入到指定的位置。如下**示例，就是將 html 頁面原有的節點插入到指定位置:
var parent = document.getelementbyid('parent');
var button = document.getelementbyid('btn');
// 將新節點新增到父節點中
var insertedelement = parentelement.insertbefore(newelement, referenceelement);由於 insertbefore() 方法實現的是將乙個節點插入到指定節點的某個子節點的前面。所以，在上述語法結構中:
我們可以通過如下**示例，學習 insertbefore() 方法的使用:
// 獲取目標父節點
var parentelement = document.getelementbyid('parent');
// 建立新節點
var newelement = document.createelement('button');
newelement.setattribute('class','button');
var text = document.createtextnode('a new button');
// 獲取目標節點
var referenceelement = document.getelementbyid('btn');
// 將新節點新增到父節點中
parentelement.insertbefore(newelement, referenceelement);
值得注意的是:如果我們是將 html 頁面中原有的節點插入到指定節點的某個子節點的前面，那這個被插入的節點會先從原有的位置移除，再插入到指定的位置。如下**示例，就是將 html 頁面原有的節點插入到指定位置:
// 獲取目標父節點
var parentelement = document.getelementbyid('parent');
// 獲取被插入的節點
var newelement = document.getelementbyid('button');
// 獲取目標節點
var referenceelement = document.getelementbyid('btn');
// 將新節點新增到父節點中
parentelement.insertbefore(newelement, referenceelement);
值得注意的是:如果 referenceelement 為 null 則 newelement 將被插入到子節點的末尾。我們需要注意的是，node 物件中並沒有提供 insertafter() 方法。所以，我們並不能像使用 jquery 中的 insertafter() 方法一樣使用。
但是，如果我們在開發中需要 insertafter() 方法的話，是可以利用 insertbefore() 方法來實現的。
實現思路其實就是利用 insertbefore() 方法將被插入的節點插入到指定節點的下乙個相鄰兄弟的前面，最終實現插入到指定節點的後面的效果。
parentelement.insertbefore(newelement, referenceelement.nextsibling);最後，真正可以實現 insertafter() 方法的主要邏輯如下:
var nextelement = referenceelement.nextsibling;
if(nextelement.nodetype === 3)
parentelement.insertbefore(newelement, nextelement);
值得注意的是:關於 insertafter() 方法，我們這裡只是提供了乙個解決的思路。在具體使用時，可能封裝的具體用法也會不同。本教程免費開源，任何人都可以免費學習、分享，甚至可以進行修改。但需要註明作者及**，並且不能用於商業。
本教程採用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。
EASYDOM系列教程 之屬性操作
element 物件提供了一些方法實現 html 元素的屬性操作，這種操作要比 node 物件提供的方法操作屬性節點要更便捷。element 物件提供了 getattribute 方法用於獲取指定元素的屬性值，其語法結構如下 var attribute element.getattribute at...
EASYDOM系列教程 之Node介紹
dom 的標準規範中提供了 node 物件，該物件主要提供了用於解析 dom 節點樹結構的屬性和方法。dom 樹結構主要是依靠節點進行解析，稱為 dom 節點樹結構。node 物件是解析 dom 節點樹結構的主要入口。node 物件提供的屬性和方法，可以實現遍歷節點 插入節點和替換節點等操作。而這些...
EASYDOM系列教程 之刪除節點
node 物件提供了 removechild 方法實現從 html 頁面中刪除指定節點。其語法結構如下 var oldchild node.removechild child orelement.removechild child 在上述語法結構中，呼叫 removechild 方法的 node 表...