JavaScript中元素创建的三种方式及区别比较

元素创建的三种方式

document.write()

document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。

<div>123</div>
<script>
    var div = document.querySelector('div');
    div.onclick = function(){
   
        document.write('<div>456</div>');
    };
</script>
//点击后，页面重绘，只显示456，之前的内容都没有了(╥﹏╥)

element.innerHTML

element.innerHTML 是将内容写入某个DOM节点，不会导致页面重绘。
注意：

• innerHTML只能用在js+html中，比如，如果使用XHML，则不能使用。
• innerHTML 是将内容写入某个DOM节点，因此会替换掉原节点下的内容。比如，在下列代码中，原div中‘123’会直接替换为’一个百度链接’。解决方案：

 div.innerHTML += '<div>一个<a href="#">百度</a>链接</div>';

• innerHTML会触发原DOM节点下所有内容重排。
• innerHTML可以直接添加字符串/替换原内容
• innerHTML 创建多个元素效率更高（使用数组形式拼接，而不是字符串拼接），但是结构会复杂一些。（文章最后效率比较会写）

<div>123</div>
<script>
    var div = document.querySelector('div');
    div.innerHTML = '一个<a href="#">百度</a>链接';