文档碎片

在一样平常的工作中，避免不了我们要想一个元素中插进去大批的动态元素，比方：

<ul id="box">

</ul>

在页面中有一个ul，我们跟着页面的某一个事宜的触发，需要向#box中插进去大批的li，一般的写法为：

var oUl = document.querySelectorAll('#box')[0];
        for(var i=0;i<1000;i++){
            var oLi = document.createElement('li');
            var t = document.createTextNode(i+'');
            oLi.appendChild(t);
            oUl.appendChild(oLi);
}

如许是能够完成的，然则如许机能就无从提起了，由于每次oUl都从新绘制了一次，由于每次oUl都调用了appendChild要领，所以，就要借助一个叫文档碎片的东西，建立一个文档碎片：

var frag = document.createDocumentFragment();

然后再经由过程oUl到场文档碎片：

oUl.appendChild(frag);

如许也就触发了一次oUl的从新绘制,机能上会大大提高，完全代码：

        var frag = document.createDocumentFragment(),
            oLi = null,
            t = '',
            oUl = document.querySelectorAll('#box')[0];
        for(var i = 0;i < 1000;i++){
            oLi = document.createElement('li');
            t = document.createTextNode(i + '');
            oLi.appendChild(t);
            frag.appendChild(oLi);
        }
        console.log(frag);
        oUl.appendChild(frag);

固然你也能够运用字符串拼接的体式格局，我在这里就不在复述了！