📋 个人简介
- 💖 作者简介：大家好，我是阿牛，全栈领域新星创作者。😜
- 💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥
前言
javascript 中动态创建元素的方法一共有三种，这里简单介绍一下，并通过小案例来对比element.innerHTML和document.createElement ()创建元素效率那个快。
三种动态创建元素区别
1.document.write ()
2.element.innerHTML
3.document.createElement ()区别
1.document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。（很少用到）
2.innerHTML是将内容写入某个 DOM 节点，不会导致页面全部重绘。
element.innerHTML和document.createElement ()创建元素效率对比
1.element.innerHTML
<div class="inner"></div>
<script>
var d1 = +new Date();
var inner = document.querySelector(".inner");
for (var i=0;i<=1000;i++){
inner.innerHTML += '<a href="#">百度</a>';
}
var d2 = +new Date();
console.log(d2 - d1);
</script>
由图可以看出，我们通过innerHTML拼接字符串创建1000个元素花费了800多毫秒，这样的效率很差。
但是我们可以避免拼接字符串的方式，因为大量拼接字符串本身就是一个耗时耗内存的操作，可以把要创建的元素放进一个数组中，然后用数组的join()方法将数组元素拼接为字符串，再通过innerHTML添加。
<div class="inner"></div>
<script>
var d1 = +new Date();
var inner = document.querySelector(".inner");
var arr = [];
for (var i=0;i<=1000;i++){
arr.push('<a href="#">百度</a>')
}
inner.innerHTML += arr.join('');
var d2 = +new Date();
console.log(d2 - d1);
</script>
看这样只有2毫秒，效率甩凭借字符串几条街。
2.document.createElement()
为了对比明显，我们将循环数量加到十万，先看innerHTML通过数组拼接的效率
<div class="inner"></div>
<div style="border: 1px solid red; height: 2px;width: 100px;"></div>
<script>
var d1 = +new Date();
var inner = document.querySelector(".inner");
var arr = [];
for (var i=0;i<=100000;i++){
arr.push('<div style="border: 1px solid red; height: 2px;width: 100px;"></div>')
}
inner.innerHTML += arr.join('');
var d2 = +new Date();
console.log(d2 - d1);
</script>
然后我们看同样情况下document.createElement()的效率
<div class="create"></div>
<script>
var d1 = +new Date();
var create = document.querySelector(".create");
for (var i=0;i<=100000;i++){
var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '2px';
div.style.border = '1px solid red'
create.appendChild(div);
}
var d2 = +new Date();
console.log(d2 - d1);
</script>
很明显，依旧是innerHTML通过数组方式创建元素的效率依旧高于document.createElement()的效率。
总结
1.innerHTMT创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂。
2.createElement(）创建多个元素效率稍低一点点，但是结构更清晰。
==总结：不同浏览器下， innerHTML效率要比 createElement 高==
结语
陆陆续续写了很多前端基础知识和小demo了，这些对初学者都很有用，赶紧关注一手学习吧！
