DocumentFragement是一组子节点的“虚拟存储”,并且它没有父标签。在我们的例子中,将DocumentFragement想象成看不见的
- 元素,在 DOM外,一直保管着你的子节点,直到他们被注入DOM中。
Javascript代码
var frag = document.createDocumentFragment();
ajaxResult.items.forEach(function(item) {
// 创建<li>元素
var li = document.createElement('li');
li.innerHTML = item.text;
// <li>元素常规操作
// 例如添加class,更改属性attribute,添加事件监听,添加子节点等
// 将<li>元素添加到碎片中
frag.appendChild(li);
});
// 最后将所有的列表对象通过DocumentFragment集中注入DOM
document.querySelector('ul').appendChild(frag);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
为DocumentFragment追加子元素,然后再将这个DocumentFragment加到父列表中,这一系列操作仅仅是一个DOM操作,因此它比起集中注入要快很多。