文档碎片createDocumentFragment

最新推荐文章于 2022-02-18 17:49:20 发布

笑笑1234

最新推荐文章于 2022-02-18 17:49:20 发布

阅读量218

点赞数

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/u014105739/article/details/122662886

版权

document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现，并重新刷新整个页面，从而消耗了大量的时间。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中。

利用createDocumentFragment 先把元素拼接起来最后统一append 到真实的dom元素节点上

 let popTitleEl = $('#pop')
    let popTitleArr = (popTitleEl[0]).textContent.split('')
    let fragment = document.createDocumentFragment('#pop')
    popTitleArr.forEach(function (item) {
        if (item != ' ' && item != '\n' && item != '') {
            let span = document.createElement('span')
            span.innerHTML = item
            fragment.append(span)
        }
    })
    popTitleEl.html(fragment)