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

方法一:

执行时间大概在35ms左右。

这个就属于使用字符串拼接之后,再一次性的插入到页面中。缺点是,容易导致事件难以绑定。

方法二:

执行时间不定,最少的在80ms左右,做多的达到了180ms左右。

这个方法是创建文档碎片保存需要插入的节点,然后一次性插入到页面中。

方法三:

执行时间基本维持在80ms左右。

这个方法就是每次创建节点之后,就立即插入到页面中,会频繁导致页面的reflow和repaint。不建议使用该方法进行DOM读写。

使用jquery创建文档碎片的时候,方法类似于js创建,需要将jquery对象转为DOM对象,再进行操做。

居然需要300多毫秒。

js创建元素的更多相关文章

  1. JS 创建元素的三种方法

    1.动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"> ...

  2. js和jQuery创建元素和把元素插入到文档中所用的方法

    js创建元素: document.createElement(" 创建的元素");   //“创建的元素”指:p ,h1,div,span........ js插入元素: docu ...

  3. js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理

    动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...

  4. js,javascript,删除元素,创建元素,插入子元素

    删除元素示例代码 <html> <head> </head> <body> <div> <div id="delId&quo ...

  5. js创建与追加元素

    用javascript创建元素 : var NewNode = document.creatElement('div'); 结合appendChild与insertBefore插入到DOM树中 ins ...

  6. JS动态创建元素

    动态添加标签,可从服务器获取标签文本,然后加载到指定div中,可用于权限控制. 1.添加标签字符串方式 var str='<div>5555555555555555555555555555 ...

  7. JS动态创建元素(两种方法)

    前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...

  8. js中改变文档的层次结构(创建元素节点,添加结点,插入子节点,取代子节点,删除子节点)

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

  9. 原生JS和jQuery创建元素的方法

    jQ创建元素的方法 1.原生代码 .creatElement('tr')` .innerHTML = '<h1>加油</h1>' document.write('<h1& ...

随机推荐

  1. ASP.NET MVC 模型和数据对象映射实践

    在使用 MVC 开发项目的过程中遇到了个问题,就是模型和数据实体之间的如何快捷的转换?是不是可以像 Entity Framework 的那样 EntityTypeConfiguration,或者只需要 ...

  2. quick 关于触摸的问题

    以前遇到一个问题就是,如果触摸层不在最后,会导致触摸失效.这是由于下面添加的层挡住了触摸层,而后添加的层会位于上面,默认是不可点击,点击不可穿透的.所以我们必须将触摸层放置到最上面. Logic.lu ...

  3. (转)Hbase shell 常用命令(1)

    Hbase shell 常用命令(1) link:http://blog.csdn.net/scutshuxue/article/details/6988348 下面我们看看HBase Shell的一 ...

  4. TV测试中的按键长按操作模拟

    从UiAutomator在TV测试中的局限性说起: 智能TV的操作和手机的操作有很大不同,一般智能TV的操作为遥控器按键操作,来向TV OS发送  KeyCode,以完成指定操作. UiAutomat ...

  5. Linux_使用Linux之安装jdk 7

    工具/原料 jdk7源码安装压缩包 方法/步骤   卸载OpenJDK rpm -qa | grep java rpm -e --nodeps java-1.6.0-openjdk-1.6.0.0-1 ...

  6. hdu 4310 Hero

    这道题是道算是一道很简单的贪心题了,但是要注意排序的依据,这道题是按照dps/hp的从大到小排序的,然后计算总的sumhp即可. #include"iostream" #inclu ...

  7. Bind的DNS解析设置forward - 阿权的书房

    bind有一项功能是forward,也就是只是做dns缓存. 适用以下情况: 1 做临时测试,不想向上级申请修改ns记录2 不想向上级申请修改ns记录但希望交给另外的服务器处理3 只有有限的公网IP, ...

  8. 使用Eclipse自带的Axis1插件生成WSDL文件

    首先创建一个web工程,创建过程如下: 如果选择Apache Tomcat v5.5,Dynamic web module version最高只能选择2.4,填写完成后点击“下一步”: 填写默认输出文 ...

  9. Scrum会议2(Beta版本)

    组名:奋斗吧兄弟 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding. ...

  10. OpenCV学习笔记——形态学梯度操作

    代码: #include<cv.h> #include<highgui.h> int main(void) { cvNamedWindow("cmp"); ...