document.wirte()
代码语言：javascript复制document.write('<div>345</div>');直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘即加载一个新的html页面，且只包含写入的内容。
代码语言：javascript复制<body>
<button>点击按钮</button>
<p>123</p>
<script>
var btn = document.querySelector('button');
btn.onclick = function () {
document.write('<div>345</div>');
}
</script>
</body>element.innerHTML
代码语言：javascript复制 <div class="inner">
</div>
<script>
var inner = document.querySelector('.inner');
inner.innerHTML = '<a href="#">百度</a>';
</script>- innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘。
- innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂。
//数组形式拼接
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('');document.creatElement()
代码语言：javascript复制 <div class="inner">
</div>
<script>
var inner = document.querySelector('.inner');
var a = document.createElement('a');
inner.appendChild(a);
</script>createElement()创建多个元素效率稍低一点点，但是结构更清晰。
在不同的浏览器下，innerHTML如果采用数组拼接形式的话效率要比createElement高。
