js创建元素
js创建多条数据,插入到页面中的方法。
方法一:

执行时间大概在35ms左右。
这个就属于使用字符串拼接之后,再一次性的插入到页面中。缺点是,容易导致事件难以绑定。
方法二:

执行时间不定,最少的在80ms左右,做多的达到了180ms左右。
这个方法是创建文档碎片保存需要插入的节点,然后一次性插入到页面中。
方法三:

执行时间基本维持在80ms左右。
这个方法就是每次创建节点之后,就立即插入到页面中,会频繁导致页面的reflow和repaint。不建议使用该方法进行DOM读写。
使用jquery创建文档碎片的时候,方法类似于js创建,需要将jquery对象转为DOM对象,再进行操做。

居然需要300多毫秒。
js创建元素的更多相关文章
- JS 创建元素的三种方法
1.动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"> ...
- js和jQuery创建元素和把元素插入到文档中所用的方法
js创建元素: document.createElement(" 创建的元素"); //“创建的元素”指:p ,h1,div,span........ js插入元素: docu ...
- js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...
- js,javascript,删除元素,创建元素,插入子元素
删除元素示例代码 <html> <head> </head> <body> <div> <div id="delId&quo ...
- js创建与追加元素
用javascript创建元素 : var NewNode = document.creatElement('div'); 结合appendChild与insertBefore插入到DOM树中 ins ...
- JS动态创建元素
动态添加标签,可从服务器获取标签文本,然后加载到指定div中,可用于权限控制. 1.添加标签字符串方式 var str='<div>5555555555555555555555555555 ...
- JS动态创建元素(两种方法)
前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
- js中改变文档的层次结构(创建元素节点,添加结点,插入子节点,取代子节点,删除子节点)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 原生JS和jQuery创建元素的方法
jQ创建元素的方法 1.原生代码 .creatElement('tr')` .innerHTML = '<h1>加油</h1>' document.write('<h1& ...
随机推荐
- BZOJ 2282 & 树的直径
SDOI2011的Dayx第2题 题意: 在树中找到一条权值和不超过S的链(为什么是链呢,因为题目中提到“使得路径的两端都是城市”,如果不是链那不就不止两端了吗——怎么这么机智的感觉...),使得不在 ...
- winrt 上的翻书特效组件 源码分享 转载请说明
http://blog.csdn.net/wangrenzhu2011/article/details/10207413 (转) [TemplatePart(Name = A_PARTNAME, Ty ...
- Strong TLS configuration on servers
- Use certificates with at least sha-256 hash algorithms (including intermediate certificates).- Use ...
- Scala _ [underscore] magic
I started learning Scala a few days before. Initially i was annoyed by the use of too many symbols i ...
- 在vs2013中配置openGL(绝对可靠 !)
首先要下载glut.h glut32.dll glut32.lib.(这个在glut-3.7.6-bin的包里面,可以直接下载 ) 然后: glut.h:放到 D:\vs2013\VC\include ...
- 用wampserver 装的集成环境,命令行进不去提示mysql
命令行进不去提示mysql 不是内部命令或外部命令. 解决办法,就是将mysql/bin路径加到path中去
- Codeforces Round #375 (Div. 2)——D. Lakes in Berland(DFS连通块)
D. Lakes in Berland time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- CSS3动画(动画已丢,看原文)
原文:http://ued.1905.com:8880/sample/css3/base/test.html CSS3动画 简要展示了CSS3常用动画效果,以及所使用代码. bounce 复制 展开代 ...
- ArcGISDynamicMapServiceLayer 实现条件过滤
<html> <head> <meta http-equiv="Content-Type" content="text/html; ...
- CodeForces 621C 数学概率期望计算
昨天训练赛的题..比划了好久才想出来什么意思 之前想的是暴力for循环求出来然后储存数组 后来又想了想 自己萌的可以.. 思路就是求出来每个人与他的右边的人在一起能拿钱的概率(V(或)的关系)然后*2 ...