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. 计算1至n中数字X出现的次数

    描述 计算 1 至 n 中数字 X 出现的次数,其中 $n \ge 1,X \in [0,9]$. 解题思路 这是一道比较简单的题目,举个例子先:假设 $n=11, X=1$,那么就是求 1, 2, ...

  2. Oracle 使用小计(3)

      1.出错处理 ORA-00911: invalid character. 这是因为在语句末尾加上了";"的缘故,去掉";"SQL就可以执行了~ (这与SQL ...

  3. 详解Adorner Layer(zz)

    首先,千万不要觉得Adorner离你很远,因为最简单的WPF界面也会用到Adorner.在WPF中,下面的几个很常见的功能,都是用Adorner实现的.     1. 光标(caret)     2. ...

  4. MySQL安装问题:Unable to update security settings解决方案

    主要问题还是之前装过,卸载的时候卸载不干净导致的. 如下: 安装到最后出现: Unable to update security settings. Access denied for user 'r ...

  5. javascript中字符串常用操作总结、JS字符串操作大全

    字符串的操作在js中非常频繁,也非常重要.以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊...今天就对字符串的一些常用操作做个整理,一者加深印象,二者方便今后温 ...

  6. 【BZOJ】2875: [Noi2012]随机数生成器(矩阵乘法+快速乘)

    http://www.lydsy.com/JudgeOnline/problem.php?id=2875 矩阵的话很容易看出来.....我就不写了.太水了. 然后乘法longlong会溢出...那么我 ...

  7. 【BZOJ】1303: [CQOI2009]中位数图(特殊的技巧)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1303 依旧是题解流,,,不看题解没法活,,,第一眼就是瞎搞,然后就是暴力,显然TLE..题解啊题解. ...

  8. HttpClient_用Apache HttpClient实现URL重定向

    很多网站都使用了URL重定向技术,把一个原始请求从一个位置路由到另一个位置.原因可能是多方面的,比如域名转发.URL缩写.隐私保护.在同一网站维持相似的域名等.本文讲述怎样使用Apache HTTPC ...

  9. android开发 BaseAdapter中getView()里的3个参数是什么意思

    BaseAdapter适配器里有个getView()需要重写public View getView(int position,View converView,ViewGroup parent){ // ...

  10. 对于默认 Windows NT 安装的 SID 值

    https://support.microsoft.com/en-us/kb/163846/zh-cn