目录
1、三种方式
1、document.write()
2、element.innerHTML
3、document.createElement()
2、区别
1、document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘；
2、innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘；
3、innerHTML 创建多个元素效率更高，（不要拼接字符串，采取数组形式拼接），结构稍微复杂；
4、createElement() 创建多个元素效率稍低一点点，但是结构更清晰。
3、总结
不同浏览器下，innerHTML 效率要比 createElement 高。
4、示例
<script>
// 三种创建元素方式区别
// 1. document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘
var btn = document.querySelector("button");
btn.onclick = function () {
document.write("<div>123</div>");
}
// 2. innerHTML 创建元素
var inner = document.querySelector(".inner");
for (var i = 0; i <= 100; i++) {
inner.innerHTML += '<a href="#">百度</a>';
}
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join("");
// 3. document.createElement() 创建元素
var create = document.querySelector(".create");
for (var i = 0; i <= 100; i++) {
var a = document.createElement("a");
create.appendChild(a);
}
</script>
5、innerTHML和createElement效率对比
5.1、innerHTML字符串拼接方式（效率低）
<script>
function fn() {
var d1 = +new Date();
var str = "";
for (var i = 0; i < 1000; i++) {
document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
}
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>
5.2、createElement方式（效率一般）
<script>
function fn() {
var d1 = +new Date()
for (var i = 0; i < 1000; i++) {
var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "2px";
div.style.border = "1px solid red";
document.body.appendChild(div);
}
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>
5.3、innerHTML数组方式（效率高）
<script>
function fn() {
var d1 = +new Date();
var array = [];
for (var i = 0; i < 1000; i++) {
array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
}
document.body.innerHTML = array.join("");
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>
后记
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！
