JS 三种添加元素的方式、区别( write、createElement、innerHTML )

文章目录

  • [1. 区别结论](#1. 区别结论)
  • [2. write 不同场合的效果](#2. write 不同场合的效果)
  • [3. createElement 和 innerHTML 耗时对比](#3. createElement 和 innerHTML 耗时对比)

1. 区别结论

方式 说明
document.write 不建议使用, 使用时要小心, 不同场合, 效果不同
document.createElement 添加少量元素时建议使用, 结构清晰易读
innerHTML 添加大量元素时建议使用

2. write 不同场合的效果

① 正常文档流中使用,会在原文档流内追加元素。
② 回调函数中使用,会按照 document.write 的内容重绘画面, 之前文档流内容会被覆盖。

正常文档流中使用:

回调函数中使用:

3. createElement 和 innerHTML 耗时对比

1. 添加少量元素时的耗时对比:
我自己试几次 createElement 能稍快一点, 但是因为数据量小, 所以差距可以忽略不记, 差距不大的情况下, 我建议使用 createElement, 因为更易读、更灵活。

2. 当插入的元素非常多时, 两者区别还是比较明显的, 下面为实验代码:

① document.createElement 耗时实验代码:

html 复制代码
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>页面添加元素</title>
</head>
<body>
<script>
  window.addEventListener('load', () => {

    let body = document.body
    let start = new Date()

    for (let i = 0; i < 10000; i++) {
      let ele = document.createElement("div")
      ele.style.width = '10px'
      ele.style.height = '10px'
      ele.style.border = '1px solid black'
      body.appendChild(ele)
    }
    console.log(`总耗时:${new Date() - start} 毫秒`)
  })
</script>
</body>
</html>

② ele.innerHTML 耗时实验代码:

html 复制代码
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>页面添加元素</title>
</head>
<body>
<script>
  window.addEventListener('load', () => {

    let ele = []
    let body = document.body
    let start = new Date()

    for (let i = 0; i < 10000; i++) {
      ele.push('<div style="width:10px; height:1px; border:1px solid black;"></div>')
    }
    body.innerHTML = ele.join('')
    console.log(`总耗时:${new Date() - start} 毫秒`)
  })
</script>
</body>
</html>

(3) 上面两段代码, 我分别执行了 5 次:

innerHTML 平均耗时为 18.6 毫秒

createElement 平均耗时为 56 毫秒

结论就是, 当添加很多元素时, 首选 数组 + innerHTML 的方式

相关推荐
资深前端之路5 小时前
vue+threeJs 绘制3D圆形
前端·javascript·vue.js
烛阴7 小时前
为什么选择Day.js?比Moment.js更轻更快的日期处理神器
前端·javascript
XiaoLeisj7 小时前
【JUC】深入解析 JUC 并发编程:单例模式、懒汉模式、饿汉模式、及懒汉模式线程安全问题解析和使用 volatile 解决内存可见性问题与指令重排序问题
javascript·安全·单例模式
moyu847 小时前
从 XMLHttpRequest 到 Fetch:AJAX 请求的演进与最佳实践
前端·javascript
划水小将军7 小时前
睡眠分期 html
前端·javascript·html
EndingCoder8 小时前
React从基础入门到高级实战:React 高级主题 - 性能优化:深入探索与实践指南
前端·javascript·react.js·性能优化·前端框架
江城开朗的豌豆8 小时前
JavaScript篇:前端兼容性历险记:那些年我们踩过的浏览器坑
前端·javascript·面试
江城开朗的豌豆9 小时前
JavaScript篇:JS事件冒泡:别让点击事件‘传染’!
前端·javascript·面试
lyz2468599 小时前
动态报表筛选多项时的优化处理
javascript·uni-app·view design
1024小神9 小时前
vue3 项目配置多语言支持,如何从服务端拿多语言配置
前端·javascript·vue.js