创建并添加dom加点如何进行优化?

1、使用文档片(DocumentFragment)

可以理解为"仓库",用来保存将来可能会添加到DOM中的节点;

 var fragment = document.createDocumentFragment();
fragment.appendChild(document.createElement('ul'));
for(var i = 0;i < 4;i++){
var li = document.createElement('li');
li.appendChild(document.createTextNode(i));
fragment.appendChild(li);
}
document.body.appendChild(fragment);

2、使用innerhtml

3、jQuery

两种方式的优劣(还是不甚理解。。):http://fins.iteye.com/blog/183373

添加dom节点及优化的更多相关文章

  1. jquery动态添加DOM节点

    1.append()方法:向每个匹配的元素内部添加元素 appendTo()方法:将所有匹配的元素追加的指定的元素中 <html> <head> <meta http-e ...

  2. javascript 分时函数 分批次添加DOM节点 timeChunk

    创建1000个webqq的qq好友列表, 一个好友用一个节点来表示 * timeChunk var timeChunk = function(a, fn, sz, done) { var obj, t ...

  3. vue,在模块中动态添加dom节点,并监听

    在这里,onclick事件没有作用,因为它指向的是window,如果写为this.click页面显示为undefined, 我采用的是通过class绑定事件,但是会有一个问题,那就是当你渲染多个事件时 ...

  4. console.time 简单分析javascript动态加入Dom节点的性能

    Bullshit 本来想每天都更新下博客的,可是近期要考试,还有就是自己还是停留在暗自窃喜中吧(这样的想法要改变). 事实上近期总在想.自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改 ...

  5. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

  6. JavaScript操作DOM节点

    DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...

  7. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  8. 将HTML字符转换为DOM节点并动态添加到文档中

    将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 ...

  9. 为DOM节点添加或者删除class

    项目中如果应用了常用的javascript类库,多数情况下,这些已经封装好的类库,都会封装一个类似于addClass和removeClass的方法,以便于我们对DOM节点的class进行操作. 以jQ ...

随机推荐

  1. dp_train_f

    Vasya And The Mushrooms 题目大意:有2n个格子,分成上下两行,每行n个,每个格子有蘑菇每秒的生长值(rate),小姑娘从左上角出发(time=0),每秒必须移动,而且只能移动到 ...

  2. Sql Server数据库链接字符串参数说明

               DataSource,//要连接到的 SQL Server 实例的名称或网络地址              FailoverPartner,//在主服务器停机时要连接到的伙伴服务 ...

  3. DBUS及常用接口介绍

    [原文]  1. 概述 1.1  DBUS概述     DBUS是一种高级的进程间通信机制.DBUS支持进程间一对一和多对多的对等通信,在多对多的通讯时,需要后台进程的角色去分转消息,当一个进程发消息 ...

  4. Centos环境下,执行gulp,显示执行成功,但找到不生成的压缩文件

    举例来说:以下是css文件夹下site.css文件为site.min.css,并且将生成的文件放在指定的目录下 //压缩站点css gulp.task('appallcss', function () ...

  5. [Spring]Spring Mvc实现国际化/多语言

    1.添加多语言文件*.properties F64_en_EN.properties详情如下: F60_G00_M100=Please select data. F60_G00_M101=Are yo ...

  6. rdlc报表出现多余空白页面

    1.RDLC报表设计好后,在ReportViewer预览报表时,页数都正常:但在切换为整页模式时,常造成多了不少空白页出来.第一时间觉得不可思议,在ReportViewer看来正常,怎可能在整页预览时 ...

  7. UVA-11367 Full Tank? (dijkstra)

    题目大意:有n个加油站,每个加油站的油价已知,并且已知油箱的大小,问能否从起点走到终点,若能,找出最小油费. 题目分析:记得在做暴力搜索的时候做过这道题,不算难.但是这次是用dijkstra算法做的, ...

  8. 字符串方法之-indexOf、lastIndexOf、等等一些方法

    1.indexOf():方法可返回某个指定的字符串值在字符串中首次出现的位置(从左往右找). 语法:stringObject.indexOf(searchvalue,fromindex) <sc ...

  9. IOS-每个程序员的编程之路上都应该看这11本书

    国外知名网站stackoverflow上有一个问题调查: 哪本书是对程序员最有影响.每个程序员都该阅读的书?,这个调查已历时两年,目前为止吸引了153,432人访问,读者共推荐出了478本书(还在增加 ...

  10. 分析器错误信息: 未能加载类型“xxx.Global”。

    Global.asax错误 分析器错误 说明: 在分析向此请求提供服务所需资源时出错.请检查下列特定分析错误详细信息并适当地修改源文件. 分析器错误信息: 未能加载类型“xxx.Global”. 源错 ...