innerHTML()
方法1：循环拼接字符串
<body>
<div></div>
<script>
let div = document.querySelector('div');
let startTime = new Date(); // 记录开始时间
for(let i=0; i<1000; i++) {
div.innerHTML += "<span style='display:block;width:50px;height:50px;'></span>"; // 循环拼接字符串
}
let endTime = new Date(); // 记录结束时间
console.log((endTime-startTime)+"ms")
</script>
</body>运行结果：
1090ms方法2：直接将数组转换为字符串
<script>
let div = document.querySelector('div');
let startTime = new Date();
let elements = []; // 创建空数组
for(let i=0; i<1000; i++) {
elements.push("<span style='display:block;width:50px;height:50px;'></span>"); // 向数组推入元素
}
div.innerHTML = elements.join(''); // 通过join()方法将数组转化为字符串
let endTime = new Date();
console.log((endTime-startTime)+"ms")
</script>运行结果：
3msarray.join()介绍 ：
将数组转化为字符串，给 join() 传入参数，可以指定数组每一项之间的分隔符
let friuts = ["apple","pear","banana"]; console.log(friuts.join('')) // 输出：applepearbanan console.log(friuts.join(',')) // 输出：apple,pear,banan
creatElement()
<script>
let div = document.querySelector('div');
let startTime = new Date();
for(let i=0; i<1000; i++) {
let span = document.createElement("span");
span.style.display = "block";
span.style.width = "50px";
span.style.height = "50px";
div.appendChild(span);
}
let endTime = new Date();
console.log((endTime-startTime)+"ms")
</script>运行结果：
6ms总结
执行效率对比：innerHTML() 数组转字符串 > createElement() > innerHTML() 拼接字符串
如果只是单纯的创建元素而不添加样式时，前两者的执行效率基本相等。
createElement() 的代码结构更清晰。