利用文档碎片来添加DOM节点

众所周知,改变DOM结构会导致屏幕重绘,这是非常消耗性能的行为,但我们有时候必须要删减或者更新现有的DOM结构。以增加子节点为例,我们来看下文档碎片的用法。

举个例子先,我们准备利用Javascript把两个段落动态地添加至<body>里,也就是为<body>添加子节点。通常我们会这么写:

?View Code JAVASCRIPT
var p, text;
p = document.createElement('p'); //创建P节点
text = document.createTextNode('这是第一段内容哗哗哗'); //创建文本节点
p.appendChild(text); //将文本添加至P节点
document.body.appendChild(p); //将含有文本的P节点追加至网页里
 
p = document.createElement('p');
text = document.createTextNode('这是第二段内容啦啦啦');
p.appendChild(text);
document.body.appendChild(p);

继续阅读利用文档碎片来添加DOM节点