三种创建元素方法的区别

• 创建元素有3种方法：document.write()、element.innerHTML和document.createElement（）

document.write()

• 参数以字符串形式输入，类似innerHTML

document.write('<div class="test">我是一个div</div>');

• 直接将内容写入文档流，若在页面文档流加载完后执行（如按钮触发），会导致页面重绘

<span>我是一个span</span>
<div>我是一个div</div>
<button>按钮</button>

<script>
	var myBtn =document.querySelector('button');
	myBtn.onclick = function() {
		document.write('<div>我是新的div</div>');
	};
</script>

点击按钮后，原先span和div消失，只有新生成的div

inner.HTML

• inner.HTML将内容写入DOM节点，不会导致页面重绘
• 若采用连续拼接字符串方式处理，会生成大量字符串，效率十分低下
• 若采用数组保存后，使用join将数组转换为字符串，一次性完成拼接，效率非常高，优于document.createElement()

var arr=[];
for (var i = 0; i < 100; i++) {
	arr.push('<a href="javascript:;"></a>');
}
myLi.innerHTML = arr.join('');

document.createElement()

• 相比优化后的innerHTML低，但结构清晰