首页 > 代码库 > 【笔记】科普createDocumentFragment() 创建文档碎片节点

【笔记】科普createDocumentFragment() 创建文档碎片节点

2024-08-16 19:54:03   215人阅读

上一篇文章说到了动态添加文本节点的方法那如果我们要添加多个文本节点或者元素节点呢？

大家可能会想到用循环然后逐个逐个添加 但是别忘了js 还提供了创建一个文本碎片的方法

createDocumentFragment();

这个方法怎么用呢？

其实这个方法就相当于一个收集器 把所有要添加的元素收集起来再打包添加到body里面

思路就是这样以下分享一下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
       window.onload = function(){
           var collect = document.createDocumentFragment();//首先创建一个收集器
           for (var i = 0; i < 500; i++) {
                 var tadiv = document.createElement("div");//创建一个元素节点
                 var text = document.createTextNode(i);//创建一个文本节点
                 tadiv.appendChild(text);//为元素节点添加文本节点
                 collect.appendChild(tadiv);//收集器把所有的内容收集起来
           }

           document.body.appendChild(collect);//把收集好的内容放到body 里面
       };
    </script>
</head>
<body>
    
</body>
</html>

 

如果不用这种方法批量添加元素而是逐个逐个appendChild这样添加就会大大影响了网页运行速度所以这个方法你值得拥有~

【笔记】科普createDocumentFragment() 创建文档碎片节点


联系
我们