這裡主要就目前本人瞭解到的關於appendChild和append方法闡述的一點點理解。這兩個方法都是在父節點的末尾新增子節點。

1. appendChild()

 	var child = parent.appendChild(child)

該方法的引數是一個Node物件,返回值依然是該Node物件（引數中的child和返回值child指向同一個Node物件）

• 插入一個新的node節點：
  HTML程式碼

 <div id="container1">
     <h1>標題1</h1>
      <p>段落1</p>
 </div>
 

JS程式碼

var container1 = document.querySelector('#container1')
var p2 = document.createElement('p')
p2.textContent = '段落2'
var p22 = container1.appendChild(p2)
console.log(p2 === p22) //true

頁面顯示結果

• 插入頁面中原有的node節點:
  HTML程式碼

<div id="container1">
 <h1>標題1</h1>
    <p>段落1</p>
</div>
<div id="container2"></div>
 

JS程式碼

 var p1 = document.querySelector('p')
 var container2 = document.querySelector('#container2')
 var p11 = container2.appendChild(p11)

頁面顯示結果

因此，如果想要將頁面中原有的節點插入到另外一個地方，節點會先從原位置移除，然後再插入到新位置。如果想要在原位置保留該節點，則需要先進行cloneNode，常見待插入節點的副本，然後再進行插入操作。
JS程式碼

var p1 = document.querySelector('p')
var p11 = p1.cloneNode(true) //cloneNode引數設定成true，表示連同子節點一起克隆，如果設定成false,則只有p元素會被克隆
var container2 = document.querySelector('#container2')
var p11 = container2.appendChild(p11)
console.log(p1 === p11) //false
 

頁面顯示結果

2. append()
MDN中說該方法還是一個實驗中的方法，因此使用時可能存在相容性問題，特別是IE瀏覽器（IE11不支援append方法），需要進行Polyfill。append方法也是既可以插入新節點或者文件中原有的節點，這一點和appendChild方法一樣。append方法與上述的appendChild方法主要存在以下3個區別：

• append方法的引數可以是一組Node物件或者DOMString物件（這裡可以簡單理解成String物件），而appendChild方法的引數只能是一個Node物件。

var container2 = document.querySelector('#container2')
container2.append('text') //成功在容器container2中插入textContent為‘text’的文字節點
var text1 = container2.appendChild('text') //報錯

以上程式碼中使用appendChild插入一個文字節點報以下錯誤：

• append方法沒有返回值
• append方法可以同時插入幾個子節點（包括字串），而appendChild一次只可以插入一個子節點

  container2.append(p11, 'haha')
  var haha1 = container2.appendChild(p11, 'haha') //只會新增p11,字串’haha‘被忽略

目前如果想在IE9+中使用append方法，需加入Polyfill