一次性插入多个节点-考虑性能

小秋的漫漫人生路

于 2020-06-17 18:27:27 发布

阅读量797

点赞数

分类专栏： js 前端

本文链接：https://blog.youkuaiyun.com/lovexiaoqiu/article/details/106815932

版权

前端同时被 2 个专栏收录

15 篇文章

订阅专栏

9 篇文章

订阅专栏

本文介绍了一种使用DocumentFragment批量创建并插入DOM元素的方法，通过创建片段并在完成元素生成后再一次性插入，有效提升网页性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


const listNode = document.getElementById("list")

// 创建一个片段,此时还没有插入到DOM树中
const frag = document.createDocumentFragment()

// 执行插入
for (let x=0; x<10;x++) {
    const li = document.createElement('li')
    li.innerHTML = 'List item' + x
    frag.appendChild(li)
}

// 执行都完成后,在插入到 DOM 树中
listNode.appendChild(frag)