添加dom节点及优化
创建并添加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节点及优化的更多相关文章
- jquery动态添加DOM节点
1.append()方法:向每个匹配的元素内部添加元素 appendTo()方法:将所有匹配的元素追加的指定的元素中 <html> <head> <meta http-e ...
- javascript 分时函数 分批次添加DOM节点 timeChunk
创建1000个webqq的qq好友列表, 一个好友用一个节点来表示 * timeChunk var timeChunk = function(a, fn, sz, done) { var obj, t ...
- vue,在模块中动态添加dom节点,并监听
在这里,onclick事件没有作用,因为它指向的是window,如果写为this.click页面显示为undefined, 我采用的是通过class绑定事件,但是会有一个问题,那就是当你渲染多个事件时 ...
- console.time 简单分析javascript动态加入Dom节点的性能
Bullshit 本来想每天都更新下博客的,可是近期要考试,还有就是自己还是停留在暗自窃喜中吧(这样的想法要改变). 事实上近期总在想.自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改 ...
- jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点
css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...
- JavaScript操作DOM节点
DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...
- (转载)html dom节点操作(获取/修改/添加或删除)
DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...
- 将HTML字符转换为DOM节点并动态添加到文档中
将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 ...
- 为DOM节点添加或者删除class
项目中如果应用了常用的javascript类库,多数情况下,这些已经封装好的类库,都会封装一个类似于addClass和removeClass的方法,以便于我们对DOM节点的class进行操作. 以jQ ...
随机推荐
- spark(三)从hbase取数据
前言 通过spark获取hbase数据的过程中,遇到了InputFormat.文章主要围绕InputFormat介绍.会牵扯到spark,mapreduce,hbase相关内容 InputFormat ...
- Pandas学习1
pandas有两种自己独有的基本数据结构Series和DataFrame Series 数据结构 data 100 300 500 index 0 1 2 或者 index data 0 100 1 ...
- 01_Storm体系概要
1. Storm发展历史 Storm历史 1. 2010年12月,backtype公司Nathan,提出Storm的核心概念2. backtype, 提供数据分析,数据处理服务的一个公司3. 2011 ...
- consul 小結
Consul Config 使用Git做版本控制的实现 https://segmentfault.com/a/1190000013807641 服务发现 - consul 的介绍.部署和使用 http ...
- [mybatis]Record与Example的用法
一.Record 一个Record是一个Dao对象(继承Mapper接口),tkmybatis会将record自动映射成sql语句,record中所有非null的属性都作为sql语句,如: 映射的sq ...
- em和px的区别一次彻底搞清楚!
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位, ...
- Cookie和Session的工作原理及比较
一.Cookie详解 (1)简介 因为HTTP协议是无状态的,即服务器不知道用户上一次做了什么,这严重阻碍了交互式Web应用程序的实现.在典型的网上购物场景中,用户浏览了几个页面,买了一盒饼干和两饮料 ...
- Linux常用插件
文件传输 虚拟机用xshell连接时,拖拽传输插件 yum install lrzsz setup界面化工具 yum install setuptool yum install ntsysv # ...
- java网络编程之图片上传
输入输出流核心代码 所有的文件传输都是靠流,其中文件复制最具代表性.输入流和输出流,从输入流中读取数据写入到输出流中. InputStream in = 输入源; OutputStream os = ...
- 第十天 1-9 rhel7-文件的归档和压缩
大纲:文件的归档和压缩1.tar命令的使用及参数解析tar.gz.bz/bz2文件的创建.查看及解压zip/unzip命令的使用 一.文件的归档和压缩 在我们的计算机中,经常会遇到有好多文件名相似或作 ...