innerHTML 与 createElement() 的效率比较

最新推荐文章于 2022-11-10 09:56:02 发布

GoodLuck_wu5

最新推荐文章于 2022-11-10 09:56:02 发布

阅读量593

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/GoodLuck_wu5/article/details/105812832

本文探讨了JavaScript中使用element.innerHTML和document.createElement()创建元素的效率。实验结果显示，当创建多个元素时，使用innerHTML（数组形式拼接）在时间上优于createElement()，但innerHTML的语法结构相对复杂，而createElement()则更简洁明了。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element.innerHTML 和 document.createElement() 都可以创建元素。
1、element.innerHTML 创建多个元素有两种方式：
①拼接字符串的方式：

var inner = document.querySelector('.inner');
for (var i = 0; i <= 100; i++) {
	inner.innerHTML += '<a href="#">百度</a>';
}

但其创建并添加上去总共用了3000毫秒左右
②数组形式拼接

var inner = document.querySelector('.inner');
var arr = [];
for (var i = 0; i <= 100; i++) {
	arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');  //数组转换为字符串

用了8毫秒左右
2、document.creatElement()

var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
    var a = document.createElement('a');
    create.appendChild(a);
}