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

大家可能会想到用循环然后逐个逐个添加 但是别忘了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. [转]Oracle Hidden Parameter:_allow_resetlogs_corruption

    本文转自eygle博客,原文地址:http://www.eygle.com/archives/2005/10/oracle_hidden_allow_resetlogs_corruption.html ...

  2. js 的match方法

    怎么调用? 字符串对象.match( 目标串 ); 返回值? 如果存在,就返回这个字符串: 否则, 返回null 实例 举一个常用的例子,判断图片路径是否包含某个字符串.

  3. noip200802排座椅

    排座椅 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 上课的时候总有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的 ...

  4. 使用flex布局通过order控制显示顺序

    整个棋盘是用一个个"+"组成的,共15行15列,所以可以使用一个15X15的二维数组表示,用户下棋的位置用行列位置表示,这样用户下棋的位置所对应的数组元素将由"+&quo ...

  5. Nginx 和 Apache 开启目录浏览功能

    1.Nginx 在相应项目的 Server 段中的 location 段中,添加 autoindex on.例如: server { listen ; server_name www.dee.prac ...

  6. MyBatis学习总结(一)——MyBatis快速入门（转载）

    本文转载自http://www.cnblogs.com/jpf-java/p/6013537.html MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了 ...

  7. kafka - advertised.listeners and listeners

    listeners, Listener List - Comma-separated list of URIs we will listen on and their protocols. Speci ...

  8. 转C#窗体无法接受Keydown事件

    问题一描述:当新建一个窗体时,添加KeyDown事件后,会正常处理,但是当添加有控件时,比如Button,TextBox,不会触发窗体的KeyDown事件,也没有调用KeyDown事件的处理程序. 原 ...

  9. redis3.2 Jedis java操作

    package com.util; import java.util.HashSet; import java.util.List; import java.util.Map; import java ...

  10. 基于Angular2的前端框架CoreUI开发使用说明

    开源地址:https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template/tree/master/Angular2_CLI_Starte ...