JS中有很多基本DOM方法，例如createElement, parentNode等，其中，appendChild方法是相当地常用与熟知，可谓是DOM节点方法中的“无人不识君”！
appendChild的作用是在指定元素节点的最后一个子节点之后添加节点。好记又好用，大家都喜欢。
appendChild方法就像是直接买饺子，实际上，我们还经常会遇到买饺子皮和馅自己包的情况。放在HTML中解释就是不是append节点，而是append构成节点的HTML字符代码。
例如，我们点击“更多评论”按钮，需要ajax加载评论相关HTML代码并插入到页面中，此时，appendChild显然就不如appendHTML方法来得方便。
二、如何实现appendHTML方法？
如果是纯粹没有脚本等行为的容器。 我们直接innerHTML拼接就可以了。例如，append一个图片HTML片段，我们可以：
container.innerHTML = container.innerHTML + '<img src="zhanghanyun.jpg" />';
好东西喜欢留到最后吃，重点都是留到最后讲。因此，上面的，大家都懂的，就是走过场的，只在特殊情况用用（单纯HTML处理），如果真要构造一个通用的appendHTML方法，innerHTML拼接显然是没有市场的。 //zxx: 如果是面试，一定要先说重点，不要铺垫酝酿什么的……
考虑到容器的原HTML极可能包含事件，因此，实现append效果的时候一定不能干扰之前的内容，那我们该如何实现呢？
不卖关子了，还是要借助appendChild方法。我们把HTML字符串转换成节点，然后通过appendChild方法载入进去。
如何将HTML字符串（假设字符串变量名为html）转换成节点呢？如下操作即可：
// 创建div节点
var div = document.createElement("div");
// 装载html字符串
div.innerHTML = html;
// 此时div.childNodes就是我们需要的节点了！
return div.childNodes;
下面要做的就是将这些节点append进去，下面是我们自然理解的实现，遍历：
var nodes = div.childNodes;
for (var i=0, length=nodes.length; i<length; i+=1) {
// 容器container加载克隆的节点 - 克隆的作用是保证nodes的完整
container.appendChild(nodes[i].cloneNode(true));
}
上面代码功能虽然实现，但是性能no, no, no. 尤其低版本IE下，缺少优化的机制①，每次appendChild造成的回流与渲染会让浏览器high到叫的。
对于DOM节点插入，大家应该都熟知“文档片段优化法”。具体来讲，就是使用document.createDocumentFragment()创建一个文档片段，然后，把节点一个一个append到这个片段中，回到页面上的时候，直接append这个文档片段就可以了-只有一次。
有话要说