了解createElement 和 createDocumentFragment

1、innerHTML 的区别

通过createElement创建的元素，可以访问到它的innerHTML，而通过createDocumnetFragment 创建的元素，访问 innerHTML 会返回underfined。

上代码：

var inner = document.createElement("span");
inner.innerHTML = "内部";

var ce = document.createElement("div");
ce.appendChild(inner);
console.log(ce.innerHTML);  //控制台输出 <span>内部</span>

var cdf = document.createDocumentFragment();
cdf.appendChild(inner);
console.log(cdf.innerHTML); //控制台输出 underfined

注意，此时的 innerHTML是cdf的一个属性，控制台输出这个属性的值，而不是作为一个方法来输出文档碎片下的元素节点。

同样，我们直接给createDocumentFragment 创建的元素 cdf的 innerHTML 赋值。

var cdf = document.createDocumentFragment();
cdf.innerHTML = “<p>myFragment</p>”;
document.body.appendChild(cdf);

打开浏览器，并不会看到任何内容，这是因为我们只是给 cdf 创建了一个innerHTML 属性并添加了一个值，而不是给文档碎片添加了元素节点。

 

2、复用

通过createElement 创建的元素是可以重复利用的，而通过 createDocumentFragment 创建的元素添加之后就不能继续操作了。

上代码：

var body = document.body;
var innerOne = document.createElement("div");
innerOne.innerHTML = "ce";
var innerTwo = document.createElement("div");
innerTwo.innerHTML = "cdf";
var ce = document.createElement("div");
ce.appendChild(innerOne);
var cdf = document.createDocumentFragment();
cdf.appendChild(innerTwo);
body.appendChild(ce);  //页面上输出ce
body.appendChild(cdf);  //页面输出 cdf
body.innerHTML = '';
body.appendChild(ce);  //页面上继续输出ce
body.appendChild(cdf);  //没有效果

我们发现再一次操作cdf时，页面上并没有预期的效果出现。

 

3、性能

从性能方面，createDo cumentFragment 可以通过创建一个文档碎片，将将要添加进body的元素先append到文档碎片中，再通过body的appendChild 一次添加进文档中，可以减少向body appendChild 的次数，减少页面刷新的次数，从而提高效率。

上代码：

 

var cdf = document.createDocumentFragment();
for(var i = 1; i <= 10; i++){
    var ce = document.createElement("span");
    ce.innerHTML = i + " ";
    cdf.appendChild(ce);
}
document.body.appendChild(cdf);

但是，从现在浏览器来看，两者的效率相差不大，使用何种方式还是要看具体实际情况。感兴趣的读者可以自己测试一下。

上代码：

// createDocumentFragment
var cdf = document.createDocumentFragment();
console.time('time');
for(var i = 1; i <= 100000; i++){
    var ce = document.createElement("span");
    ce.innerHTML = i + " ";
    cdf.appendChild(ce);
}
document.body.appendChild(cdf);
console.timeEnd('time');

// createElement
console.time('time');
for(var i = 1; i <= 100000; i++){
    var ce = document.createElement("span");
    ce.innerHTML = i + " ";
    document.body.appendChild(ce);
}
console.timeEnd('time');