创建并添加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. 初识numpy的多维数组对象ndarray

    PS:内容来源于<利用Python进行数据分析> 一.创建ndarray 1.array :将一个序列(嵌套序列)转换为一个数组(多维数组) In[2]: import numpy as ...

  2. .net 修改AD域中的密码

    1.通过vs 2013 新建一个web站点(不是空项目),这个会带一下模板, 2.然后新建一个页面UpdatePassWord.aspx aspx页面内容: <%@ Page Title=&qu ...

  3. [Network Architecture]Mask R-CNN论文解析(转)

    前言 最近有一个idea需要去验证,比较忙,看完Mask R-CNN论文了,最近会去研究Mask R-CNN的代码,论文解析转载网上的两篇博客 技术挖掘者 remanented 文章1 论文题目:Ma ...

  4. JSon数据类型&使用基础

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. SpringMVC两种处理器适配器

    1.实现Controller接口的处理器适配器 package com.xiaostudy; import javax.servlet.http.HttpServletRequest; import ...

  6. Struts2的select使用

    struts2的select标签中,常用的有以下几个属性:(1)struts2中的select 标签中,必须设置的属性只有一个,即是list.(2)select标签的list中必须有值,不然会报错.如 ...

  7. int数组的下标为n

    int 类型的数组 先定义int n = 5: 定义int a[n] = {0}; 编译怎么不通过啊?n必须为常量如果想实现你说的,应该用宏#define n 5int a[n]={0};这样就可以了 ...

  8. 第十天 1-9 rhel7-文件的归档和压缩

    大纲:文件的归档和压缩1.tar命令的使用及参数解析tar.gz.bz/bz2文件的创建.查看及解压zip/unzip命令的使用 一.文件的归档和压缩 在我们的计算机中,经常会遇到有好多文件名相似或作 ...

  9. 局部标签(gcc对c的扩展)

    每个语句内嵌表达式都是一个可以声明局部跳转标签的域.一个局部标签只是一个标识符:你可以使用通常的goto语句跳到它--但是只能在它所属的域内这么做.一个局部标签的申明如下:__label__ labe ...

  10. [nodejs]解决mysql和连接池(pool)自动断开问题

    最近在做一个个人项目,数据库尝试使用了mongodb.sqlite和mysql.分享一下关于mysql的连接池用法.项目部署于appfog,项目中我使用连接池链接数据库,本地测试一切正常.上线以后,经 ...