DOM批量添加元素

·  阅读 2377

// 1、创建文档片段,将标签全部放入该片段中,再统一插入doucment,这样只会渲染一次
var root = document.getElementById('root');
var fragment = document.createDocumentFragment();
for (let i=0;i<1000;i++) {
  let li = document.createElement('li');
  li.innerHTML = 'li标签';
  fragment.appendChild(li);
}
root.appendChild(fragment);

// 2、使用display先隐藏,在显示
var ul = document.getElementById('root');
ul.style.display = 'none';
// 添加数据
appendDataToElement(ul,data);
ul.style.display = 'block';

// 3、将原始元素拷贝到一个脱离文档的节点中,修改副本,完成后再替换原始元素
var old = document.getElementById('root');
var clone = old.cloneNode(true);
appendDataToElement(ul,data);
old.parentNode.replaceChild(clone,old);复制代码


分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改