通过模板元素clone，替代createElement

很多人喜欢在JavaScript中使用 document.write 来给页面生成内容。

事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。

虽然我们可以会使用字符串直接写HTML来创建节点，其实这样做，（提示：没有进行过测试，网络上有说好有说坏。几乎都是复制粘贴别人的，所以无法确定。而且使用了，react、vue等mvvm框架后，操作dom的工作很少了，这一点可以忽略）

1. 无法保证代码的有效性；

2. 字符串操作效率低。

所以，正确的做法是用 document.createElement()方法，而如果文档中存在现成的样板节点，应该是用 cloneNode() 方法。

因为使用 createElement() 方法之后，你可能需要多次设置元素的属性，使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素，应该先准备一个样板节点。

// 错误示例
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    el.className = 'text'; // 多次设置属性
    frag.appendChild(el);
}
document.body.appendChild(frag);
// 替换为：
var frag = document.createDocumentFragment();
var pEl = document.getElementsByTagName('p')[0]; // 使用 cloneNode 复制节点
for (var i = 0; i < 1000; i++) {
    var el = pEl.cloneNode(false);
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);