动态创建标签并添加文本信息

  1. <ul>
  2. </ul>

1 appendChild (都兼容)

  1. var ul = document.getElementsByTagName("ul")[0];
  2. for(var i = 0; i < 5; i++) {
  3. var li = document.createElement("li");
  4. li.appendChild(document.createTextNode("text"));
  5. ul.appendChild(li); //逐个添加列表项,会导致浏览器的反复渲染
  6. }

2.insertAdjacentHTML (都兼容)

  1. var ul = document.getElementsByTagName("ul")[0];
  2. for(var i = 0; i < 5; i++) {
  3. ul.insertAdjacentHTML("afterbegin", "<li>text</li>")
  4. }

3.innerHTML (都兼容)

  1. var ul = document.getElementsByTagName("ul")[0],
  2. html = "";
  3. for(var i = 0; i < 5; i++) {
  4. html += "<li>text</li>";
  5. }
  6. ul.innerHTML = html;

4.createDocumentFragment (都兼容)

  1. var ul = document.getElementsByTagName("ul")[0],
  2. dF = document.createDocumentFragment();//创建文档片段
  3. for(var i = 0; i < 5; i++) {
  4. var li = document.createElement("li");
  5. li.appendChild(document.createTextNode("text"));
  6. dF.appendChild(li); //用文档片段来保护创建的列表项,然后再一次性添加到文档中,这里的文档片段相当于一个仓库
  7. }
  8. ul.appendChild(dF);
  9. ul = null,
  10. dF = null;

下面是几种方法的性能对比

测试网站 https://jsperf.com

测试结果以每秒钟执行测试代码的次数(Ops/sec)显示,这个数值越大越好。除了这个结果外,同时会显示测试过程中的统计误差,以及相对最好的慢了多少(%),统计误差也是非常重要的指标

本人只在chrome上 测试了。数据可能不准确。你也可以在ff ,ie或其他浏览器测试。

insertAdjacentHTML    vs     append

insertAdjacentHTML     vs innerHTML

insertAdjacentHTML  vs createDocumentFragment

appendChild   vs   createDocumentFragment

终上所述几种方法依我个人的测试得出结论

innerHTML>>insertAdjacentHTML   >appendChild   >createDocumentFragment

所以最好使用innerHTML(性能最优越)来动态创建标签。   insertAdjacentHTML代码量最少

js中几种动态创建元素并设置文本内容的比较,及性能测试。的更多相关文章

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

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

  2. IE8下动态生成option无法设置文本内容

    问题: 1.在IE8下,JS动态添加 option 的时候,value 有值,但是文本内容添加不上 例:<option value="北京"></option&g ...

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

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

  4. js入门之DOM动态创建数据

    一. 知识点回顾 1. DOM结构 nodeName: '' 标签名 nodeType: '' 类型 1元素节点 2属性节点 3文本节点 nodeValue: '' 如果是元素节点 nodeValue ...

  5. [转]js中几种实用的跨域方法原理详解

    转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...

  6. JS中几种常见的数组算法(前端面试必看)

    JS中几种常见的数组算法 1.将稀疏数组变成不稀疏数组 /** * 稀疏数组 变为 不稀疏数组 * @params array arr 稀疏数组 * @return array 不稀疏的数组 */ f ...

  7. jquery利用appendTo动态创建元素

    动态创建元素可以说是DOM中常做的事情,下面我来介绍在jquery中利用appendTo来动态创建元素,有需要的朋友可参考参考. 当HTML字符串是没有属性的元素是, 内部使用document.cre ...

  8. Javascript:DOM动态创建元素实例应用

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

  9. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

随机推荐

  1. android默认获取敏感权限

    1.通过系统签名获取权限 定制系统中,可以通过源码的签名文件对应用进行签名,在应用的AndroidManifest.xml中配置好参数,如图 <manifest xmlns:android=&q ...

  2. ASE19团队项目alpha阶段model组 scrum9 记录

    本次会议于11月13日,19时整在微软北京西二号楼sky garden召开,持续7分钟. 与会人员:Jiyan He, Kun Yan, Lei Chai, Linfeng Qi, Xueqing W ...

  3. 一秒钟教会你如何 使用jfreechart制作图表,扇形图,柱形图,线型图,时序图,附上详细代码,直接看效果

    今天有小伙伴问到我怎么使用jfreeChat生成图标,去年就有一个这方便的的总结,今天再遇到,就总结出来,供大家参考: 第一个: 创建柱状图,效果图如下: 柱状图代码如下: package cn.xf ...

  4. SmartBinding with kbmMW #4

    前言 在前面写过的文章中,详细介绍过如何将各种的控件与数据源进行绑定(Bind).在这篇文章中,将重点讨论如何绑定TImage和TListView.(同时支持VCL与Firemonkey). 将图形数 ...

  5. vscode 踩坑汇总

    gopls 提示 update 将 "go.useLanguageServer": true 改为 "go.useLanguageServer": false

  6. eclipse创建Maven Web项目以及无法修改Project Facets

    1.在eclipse中创建maven项目,在菜单栏的:File-->New-->other中,搜索maven则会出现Maven Project; 2.点击next继续; 3.点击next继 ...

  7. briup_JDBC

    连接mysql和orcle的驱动jar包 链接:https://pan.baidu.com/s/1M5RZY62UOZbfFGIwDQK6SQ  提取码:cu6e 复制这段内容后打开百度网盘手机App ...

  8. PAT Advanced 1153 Decode Registration Card of PAT (25 分)

    A registration card number of PAT consists of 4 parts: the 1st letter represents the test level, nam ...

  9. Caffe---Pycaffe转换均值文件:xxx_mean.binaryproto成为xxx_mean.npy

    Pycaffe转换均值文件:xxx_mean.binaryproto成为xxx_mean.npy 为什么需要mean.binaryproto转mean.npy? 使用Caffe的C++接口进行操作时, ...

  10. Map的使用及遍历方式

    Java中Map遍历的四种方式 如果同时需要key和value推荐使用entrySet(第一种): 如果只是获取key,或者value,推荐使用keySet或者values方式(第二种): 如果需要在 ...