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

文章目录

1. 区别结论
2. write 不同场合的效果
3. createElement 和 innerHTML 耗时对比

1. 区别结论

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

2. write 不同场合的效果

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

正常文档流中使用：
请添加图片描述

回调函数中使用：
请添加图片描述

3. createElement 和 innerHTML 耗时对比

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

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

① document.createElement 耗时实验代码：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面添加元素</title>
</head>
<body>
<script>window.addEventListener('load', () => {let body = document.bodylet 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 耗时实验代码：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面添加元素</title>
</head>
<body>
<script>window.addEventListener('load', () => {let ele = []let body = document.bodylet 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>