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

大家可能会想到用循环然后逐个逐个添加 但是别忘了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() 创建文档碎片节点的更多相关文章

  1. javascript创建文档碎片节点

    在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...

  2. createDocumentFragment()　创建文档碎片节点

    var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...

  3. JS性能优化之创建文档碎片(document.createDocumentFragment）

    讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...

  4. 【js基础修炼之路】--创建文档碎片document.createDocumentFragment()

          讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于 ...

  5. 文档碎片DocumentFragment

    文档碎片是什么? 参考标准的描述,DocumentFragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段,换句话说有文档缓存的作用. createDocumentFragm ...

  6. javascript之文档碎片，文档碎片在理论上可以提高DOM操作的执行效率

    刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...

  7. 文档碎片及xml讲解

    1.将数据渲染到页面的几种方式 1.字符串拼接 2.dom循环 3.模板 4.文档碎片 字符串拼接: 优势:只进行一次dom回流 缺点:原有的dom事件会消失 案例分析:原有list中有3个li,并且 ...

  8. JS JavaScript中的文档碎片 DocumentFragement JS性能优化

    文档碎片是什么: 如果我们要在一个ul中添加100个li,如果不使用文档碎片,那么我们就需要使用append经常100次的追加,这会导致浏览器一直不停的渲染,是非常消耗资源的.但是如果我们使用文档碎片 ...

  9. document文档碎片

    var arrText = ["1","2","3","4","5","6",& ...

随机推荐

  1. Assertion failure in -[UITableView _classicHeightForRowAtIndexPath:], /SourceCache/UIKit_Sim/UIKit-3318/UITableView.m:10772

    Assertion failure in -[UITableView _classicHeightForRowAtIndexPath:], /SourceCache/UIKit_Sim/UIKit-3 ...

  2. 利用React实现表头维度功能

    这是我真正意义上地用react实现一些东西.这次分享的是一个很简单的小组件,效果图先放上来: 前端样式用的是一套框架.功能很简单,就是根据选择的维度,在成员里选择对应这个维度的选项. 首先初始化一些数 ...

  3. [转]SQL三种获取自增长的ID方法

     最新更新请访问: http://denghejun.github.io   SQL SERVER中的三种获得自增长ID的方法  这个功能比较常用,所以记下来以防自己忘掉. SCOPE_IDENTIT ...

  4. gojs绘流程图

    引用:http://www.tuicool.com/articles/eEruaqu http://www.open-open.com/lib/view/open1435023502544.html ...

  5. 如何使用QQ号进行快捷登录

    注意:第三步回调地址域名必须严格按照规范填写否则无法使用.QQ回调地址域名为您的网站地址无论您是否为DISCUZ论坛,请全部使用网站申请.discuz论坛申请的KEY无效注册QQ登录应用将会获得该应用 ...

  6. mockito使用心得

    前提:pom引用<dependency> <groupId>junit</groupId> <artifactId>junit</artifact ...

  7. swfit-扩展语法

    import UIKit extension Double { var km: Double { } var m : Double { return self} var cm: Double { re ...

  8. 数据结构与算法分析——C语言描述 第三章的单链表

    数据结构与算法分析--C语言描述 第三章的单链表 很基础的东西.走一遍流程.有人说学编程最简单最笨的方法就是把书上的代码敲一遍.这个我是头文件是照抄的..c源文件自己实现. list.h typede ...

  9. Object C中Block用法

    先了解定义C语言的函数指针! int sum (int x, int y) { return x+ y; } // 定义函数 int (*p)(int, int) = sum; NSLog(, )); ...

  10. Apple Reject

    2016年11月10日 上午1:15 发件人 Apple 2. 1 PERFORMANCE: APP COMPLETENESS Thank you for your resubmission. Per ...