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& ...
随机推荐
- 不容易系列之(4)——考新郎[HDU2049]
不容易系列之(4)——考新郎 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- TYVJ P1007 排座椅 Label:多想想输出 水
背景 NOIP2008年普及组第二题 描述 上课的时候总有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主任小雪发现了一些有趣的现象,当同学们的座次确定下来之后,只 ...
- POJ 3071 Football(概率DP)
题目链接 不1Y都对不住看过那么多年的球.dp[i][j]表示i队进入第j轮的概率,此题用0-1<<n表示非常方便. #include <cstdio> #include &l ...
- HTML5中的Blob对象的使用
HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN ...
- asp.net 微信企业号办公系统-流程设计--流程步骤设置-策略设置
策略设置包括当前步骤的流转方式,处理人员,退回策略等设置. 流转类型:当前步骤后面有多个步骤时,此类型选择可以决定后续步骤的发送方式. 1.系统控制:由系统根据您在线上设置的流转条件来判断该发送到哪一 ...
- Eclipse远程调试(远程服务器端监听)
前提:远程服务器上运行的WEB项目class对应的源码与本地项目中必须保持一致,也就是远程tomcat部署的项目就是本机项目打包过去的,而本机项目没有发生变动. 远程服务器端 服务器端配置eclips ...
- Js操作Select大全
判断select选项中 是否存在Value="paraValue"的Item 向select选项中 加入一个Item 从select选项中 删除一个Item 删除select中选中 ...
- iOS开发项目之四 [ 调整自定义tabbar的位置与加号按钮的位置]
自定义tabbar与按钮的添加 01 - 把系统的tabbar用我们自己的覆盖 LHQTabBar *lhqTabBar = [[LHQTabBar alloc]init]; [self setVal ...
- easyui datagrid 增删改查示例
查询JSP页面 <!doctype html> <%@include file="/internet/common.jsp"%> <!-- 新样式右侧 ...
- android之消息机制(一)
消息操作类Handler 首先编写main.xml文件代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk ...