摘要：來看一個在本文檔嵌入一個來自中的節點的例子節點的插入在父節點上調用方法，參數是想要插入的子節點，執行的結果是，這個子節點會被成為父節點的最后一個子節點。必須傳入一個或者，不能省略。

1: 節點的創建
新建一個新節點的方式主要有三種：
1: createElement()

document.createElement(tagName); //返回一個HTMLElement類型的節點，參數為字符串類型的標簽名字

var p = document.createElement("p"); //

2: createTextNode()

document.createTextNode(text);//返回一個Text類型的節點，參數為這個節點里的內容，字符串

var text = document.createTextNode("text node content"); //"text node content"

3: cloneNode()

targetElement.cloneNode(deepClone);//它接受一個參數，如果為true,就返回對targetElement的深拷貝，也就是返回targetElement包含它的后代子節點；如果為false，就只返回targetElement本身，不包含任何的子節點

比如，我們有一段HTML：

    
book 1
    
book 2
    

我們對"

"元素分別進行深拷貝和淺拷貝：

4: importNode()

document.importNode(externalNode, deep);

externalNode: 來自別的document的node, 比方說一個iframe的node
deep: 是否深拷貝，默認值為false. 在DOM4的時候，在deep缺省的情況下，它的默認值是true，但是后來又變為false。所以為了向前向后兼容，deep永遠給一個值，不要缺省。

來看一個在本文檔嵌入一個來自iframe中的節點的例子：

var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentWindow.document.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);

2: 節點的插入
1: appendChild()

parentNode.appendChild(childNode)

在父節點上調用appendChild（）方法，參數是想要插入的子節點，執行的結果是，這個子節點會被成為父節點的最后一個子節點。
假如我們之前有一段HTMl:

    
book 1
    
book 2
  

我們現在先新建一個"

• "元素，然后把它添加到"
  "里面：

  var lastBook = document.createElement("li");
  lastBook.textContent = "last book";
  var bookList = document.getElementsByClassName("bookList")[0];
  bookList.appendChild(lastBook);

  再執行完上面的代碼之后，之前的HTML就會變成：

  
      
  book 1
      
  book 2
      
  last book
  

  2: insertBefore()

  var insertedNode = parentNode.insertBefore(newNode, referenceNode);
  
  newNode: 想要插入的節點
  referenceNode: 新的節點插入到referenceNode節點之前。必須傳入一個node或者null，不能省略。
  

  還是上面的一段HTML:

  
      
  book 1
      
  book 2
    

  我們嘗試在最后一個"

  • "前面插入一個新的"
  • ":

    var bookList = document.getElementsByClassName("bookList")[0];
    var lastLi = bookList.lastElementChild;
    var newLi = document.createElement("li");
    newLi.textContent = "new book";
    bookList.insertBefore(newLi, lastLi);

    執行完上面的代碼之后，原來的"

  • "就變為：

    
        
    book 1
        
    new book
        
    book 2
    

    3: insertAdjacentHTML()

    element.insertAdjacentHTML(position, HTMLText);//參數為一段HTML文本
    element.insertAdjacentElement(position, Element);//參數為一個Element
    element.insertAdjacentText(position, text); //插入一段純文本

    以上的三個方法，都是根據position的值，在特定的位置插入一個節點，只是參數的類型不一樣。position的值有四個：

    1: ‘beforeBegin’
    2: "afterBegin"
    3: "beforeEnd"
    4: "afterEnd"

    以上四個值，駝峰和全小寫都可以。

    
    1: 先來就以上三個不同的方法的使用和效果做一個對比：
    還是先準備一段HTML:

     
    
        
    book 1
        
    book 2
     
    

    1: element.insertAdjacentHTML(position, HTMLText);

    var bookList = document.getElementsByClassName("bookList")[0];
    bookList.insertAdjacentHTML("afterBegin","
     new node
    ");

    執行完之后，原來的HTML變成這樣：

    2: element.insertAdjacentElement(position, Element);
    還是之前的那段HTML,然后我們執行：

    var bookList = document.getElementsByClassName("bookList")[0];
    var newLi = document.createElement("li");
    newLi.textContent = "new node";
    bookList.insertAdjacentElement("afterBegin", newLi)
    

    執行完之后，效果變這樣：
    

    3: element.insertAdjacentText(position, text)
    還是之前的那段HTML, 然后我們執行：

    var bookList = document.getElementsByClassName("bookList")[0];
    bookList.insertAdjacentText("afterBegin", "text content")
    

    執行之后，會在"

    "的最開頭添加一段純文本。

    3: 節點的替換

    oldNode.parentNode.replaceChild(newNode, oldNode);

    還是之前的那段HTML:

    
        
    book 1
        
    book 2
      

    我們嘗試把第一個"

    • "元素換掉：

      var bookList = document.getElementsByClassName("bookList")[0];
      var oldLi = bookList.firstElementChild;
      var newLi = document.createElement("li");
      newLi.textContent = "new node";
      bookList.replaceChild(newLi, oldLi);

      執行完上面的代碼之后呢，之前的HTML就變成了這樣：

      
          
      new node
          
      book 2
      
      
      

      4: 節點的刪除

      targetNode.parentNode.removeChild(targetNode);

      依然是在目標元素的父節點上調用這個方法，把目標元素作為參數傳進去。
      還是我們之前的那段HTML:

      
          
      book 1
          
      book 2
       
        

      我們嘗試著把第一個"

    • "刪掉：

      var bookList = document.getElementsByClassName("bookList")[0];
      bookList.removeChild(bookList.firstElementChild);

      這之后，就只剩下一個"

    • "元素了：

      
              
          
      book 2
        

      removeChild()會對父節點的childNodes產生影響，刪掉了一個節點，它后面的節點會在childNodes里依次往前移動。