DOM:动态创建元素的三种方法以及他们的区别

创建元素的三种方法：

1. document.write()
他的特点是直接将内容写入到页面中，当文档流执行完毕后，他会导致页面重绘，如果有些其他的代码，则会覆盖，不推荐使用。

<script>
// window.onload表示当页面全部加载完毕后再执行{}内的代码
window.οnlοad=function(){
	document.write("<div>123</div>");
}
</script>

2. innerHTML
innerHTML和document.createElement()如果是创建单个元素是没有区别的
如果创建的元素数量很多， 使用innerHTML拼接字符串的方式和document.createElement()相比，效率会低很多
但如果使用innerHTML数组的形式和document.createElement()相比，效率就会提高很多，比document.createElement()效率还要高。

<div></div>
<script>
// 采取拼接字符串的方式创建元素 效率很低
	var divs = document.querySelector("div");
	for(var i=0; i<=500; i++){
		divs.innerHTML += "<a href='javascript:;'>123</a>";
	}
// 采取数组的方式创建元素 效率更高
	var arr = [];
	for(avr i=0; i<=500; i++){
	// 向数组中添加a
		arr.push("<a href='javascript:;'>123</a>");
	}
	// join把数组转换为字符串形式
	dis.innerHTML = arr.join[""];
</script>

3. document.createElement()

<div></div>
<script>
	var divs = document.querySelector("div");
	for(var i=0; i<=500; i++){
            var as = document.createElement("a");
            divs.appendChild(as);
        }
</script>