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

  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. 阅读文章《DDD 领域驱动设计-如何 DDD?》的阅读笔记

    文章链接: https://www.cnblogs.com/xishuai/p/how-to-implement-ddd.html 文章作者: 田园里的蟋蟀 首先感谢作者写出这么好的文章. 以下是我的 ...

  2. 【ASE高级软件工程】第一次结对作业

    问题定义 具体规则见:讲义.大致规则如下: N个同学(N通常大于10),每人写一个0~100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0.618(所谓黄金分割常数 ...

  3. 【SpringBoot】整合日志框架

    一.日志框架概述 1.1 日志框架的产生 1.2 市面上的日志框架 二.SLF4j 使用与整合 2.1 如何在系统中使用SLF4j 2.2 如何整合日志框架 2.3 SpringBoot中的日志关系 ...

  4. 三、DQL语言

    目录 一.基础查询 (一)语法 (二)特点 (三)示例 二.条件查询 (一)语法 (二)筛选条件的分类 三.排序查询 (一)语法 (二)特点 四.常见函数 (一)介绍 (二)分类 五.单行函数 (一) ...

  5. Dedecms限制栏目列表生成的最大页数

    首先,我们要登陆DEDECMS后台 >> 系统 >> 站点设置 的同条栏目上,添加一个新的变量,变量名称:cfg_listmaxpage,变量说明:栏目生成列表最大页数,变量值 ...

  6. 翻译应用将在Win8.1系统中取消下载安装

    自Windows8.Windows Phone 7.1和Windows Phone 8受到影响之后,微软又正式宣布停止对翻译应用提供支持服务.Microsoft Translator这款应用将从Win ...

  7. Hadoop_20_MapReduce程序的运行模式

    1.MapReduce程序的运行模式 1. Windows中运行MapReduce程序 (1)mapreduce程序是被提交给LocalJobRunner在本地以单进程的形式运行 (2)而处理的数据及 ...

  8. 根据进程id pid 查容器id

    To get container ID you can use: cat /proc/<process-pid>/cgroup Then to convert the container ...

  9. 如何处理请求返回的二进制数据流转化成xlsx文件?

    /* fileName : 文件名 res:二进制流 */ function getOutExcel(fileName, res) { let blob = new Blob([res], { typ ...

  10. JVM命令jinfo

          jinfo也是jvm中参与的一个命令,可以查看运行中jvm的全部参数,还可以设置部分参数.   格式      jinfo [ option ] pid      jinfo [ opti ...