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

Posted 2020-08-14 Stitch晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了笔记科普createDocumentFragment() 创建文档碎片节点相关的知识，希望对你有一定的参考价值。

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

大家可能会想到用循环然后逐个逐个添加但是别忘了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() 创建文档碎片节点的主要内容，如果未能解决你的问题，请参考以下文章

如何“阅读”数学？：上海顶尖中学学生的阅读笔记