概念和區別：
append()
可以同時傳入多個節點或字符串，沒有返回值；
據說 append 還是試用期的方法，有兼容問題，（但我用了暫時火狐，谷歌，iE都能使用）。
https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/append
appendChild()
只能傳一個節點，且不直接支持傳字符串【需要 appendChild(document.createTextElement('字符串'))代替】，返回追加的 Node 節點；
若 appendChild() 的參數是頁面存在的一個元素，則執行后原來的元素會被移除；
例如：document.getElement("a").appendChild(document.getElementByIdx("b"))，執行后，b 元素會先被移除，然后再添加到 a 中。
innerHTML
添加的是純字符串，不能獲取內部元素的屬性；不同於 appendChild 添加到的是 dom 對象，返回的也是 dom 對象，可以通過 dom 對象訪問獲取元素的各種屬性。
性能
innerHTML 比 appendChild 要方便，特別是創建的節點屬性多，同時還包含文本的時候；
但執行速度的比較上，使用 appendChild 比 innerHTML 要快，特別是內容包括 html 標記時，appendChild 明顯要快於 innerHTML，這可能是因為 innerHTML 在鋪到頁面之前還要對內容進行解析才能鋪到頁面上，當包含 html 標記過多時， innerHTML速度會明顯變慢。
案例：
<body>
<div id="test1"></div><br>
<input type="button" onclick="innerTest()" value="testInnerHTML">
<div id="test2"></div><br>
<input type="button" onclick="appendTest()" value="testAppendChild">
<script type="text/javascript">
function innerTest() {
var t1 = (new Date()).getTime();
var a = "<b>apple</b>";
var b = document.getElementById("test1");
for (var i = 0; i < 500; i++) {
b.innerHTML += a;
}
t2 = (new Date()).getTime();
console.log("testInnerHTML:" + (t2 - t1));
}
function appendTest() {
var t1 = (new Date()).getTime();
var b = document.getElementById("test2");
for (var i = 0; i < 500; i++) {
var a = document.createElement("b");
a.appendChild(document.createTextNode("apple"));
b.appendChild(a);
}
t2 = (new Date()).getTime();
console.log("testAppendChild:" + (t2 - t1));
}
</script>
</body>
輸出結果：
