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

1: 節(jié)點(diǎn)的創(chuàng)建
新建一個新節(jié)點(diǎn)的方式主要有三種：
1: createElement()

document.createElement(tagName); //返回一個HTMLElement類型的節(jié)點(diǎn)，參數(shù)為字符串類型的標(biāo)簽名字

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

2: createTextNode()

document.createTextNode(text);//返回一個Text類型的節(jié)點(diǎn)，參數(shù)為這個節(jié)點(diǎn)里的內(nèi)容，字符串

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

3: cloneNode()

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

比如，我們有一段HTML：

    
book 1
    
book 2
    

我們對"

"元素分別進(jìn)行深拷貝和淺拷貝：

4: importNode()

document.importNode(externalNode, deep);

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

來看一個在本文檔嵌入一個來自iframe中的節(jié)點(diǎn)的例子：

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: 節(jié)點(diǎn)的插入
1: appendChild()

parentNode.appendChild(childNode)

在父節(jié)點(diǎn)上調(diào)用appendChild（）方法，參數(shù)是想要插入的子節(jié)點(diǎn)，執(zhí)行的結(jié)果是，這個子節(jié)點(diǎn)會被成為父節(jié)點(diǎn)的最后一個子節(jié)點(diǎn)。
假如我們之前有一段HTMl:

    
book 1
    
book 2
  

我們現(xiàn)在先新建一個"

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

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

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

  
      
  book 1
      
  book 2
      
  last book
  

  2: insertBefore()

  var insertedNode = parentNode.insertBefore(newNode, referenceNode);
  
  newNode: 想要插入的節(jié)點(diǎn)
  referenceNode: 新的節(jié)點(diǎn)插入到referenceNode節(jié)點(diǎn)之前。必須傳入一個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);

    執(zhí)行完上面的代碼之后，原來的"

  • "就變?yōu)椋?/p>

    
        
    book 1
        
    new book
        
    book 2
    

    3: insertAdjacentHTML()

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

    以上的三個方法，都是根據(jù)position的值，在特定的位置插入一個節(jié)點(diǎn)，只是參數(shù)的類型不一樣。position的值有四個：

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

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

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

     
    
        
    book 1
        
    book 2
     
    

    1: element.insertAdjacentHTML(position, HTMLText);

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

    執(zhí)行完之后，原來的HTML變成這樣：

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

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

    執(zhí)行完之后，效果變這樣：
    

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

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

    執(zhí)行之后，會在"

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

    3: 節(jié)點(diǎn)的替換

    oldNode.parentNode.replaceChild(newNode, oldNode);

    還是之前的那段HTML:

    
        
    book 1
        
    book 2
      

    我們嘗試把第一個"

    • "元素?fù)Q掉：

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

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

      
          
      new node
          
      book 2
      
      
      

      4: 節(jié)點(diǎn)的刪除

      targetNode.parentNode.removeChild(targetNode);

      依然是在目標(biāo)元素的父節(jié)點(diǎn)上調(diào)用這個方法，把目標(biāo)元素作為參數(shù)傳進(jìn)去。
      還是我們之前的那段HTML:

      
          
      book 1
          
      book 2
       
        

      我們嘗試著把第一個"

    • "刪掉：

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

      這之后，就只剩下一個"

    • "元素了：

      
              
          
      book 2
        

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