JavaScript中三种动态创建元素的区别

## JavaScript中三种动态创建元素的区别

在我们的页面中，有一些元素是不能在html中直接创建的，需要在JavaScript中动态的创建元素，在JavaScript中动态创建元素有几种常用的方法：

1.document.write()
2.element.innerHTML
3.document.createElement()

接下来分别介绍一下这几种方法，以及他们的适用的一些场景
document.write()
这种方法的使用方式是非常的简单的只需要在()里面写入你想要的创建的元素就行了
例如创建一个div标签：document.write('<div></div>')
这样就在页面中创建了一个div标签，但是这种方法在使用过程中有一个致命的问题就是在文档流加载完之后会将整个页面重绘。所谓页面重绘就是将整个页面的内容全都变成write()里面的内容，比如上面的代码，在动态创建之后，在整个页面中就只有div这个元素，其余的（如果有别的内容的话）都被重绘了。
因为这种致命的缺陷，所以这种方法是一种相对其他两种比较少用的方法。

element.innerHTML
这种创建方式是充分利用了innerHTML方法的特性，其特性就是可以识别innerHtml中的各种HTML标签。
例如在div中创建a标签：div.innerHTML = '<a href:"#">空地址</a>'
而我们在创建多个标签时，通常利用for循环来创建，比如创建100个a标签

for(var i=0;i<100;++i){
		div.innerHTML += '<a  href:"#">空地址</a>'
	}
我们可以看到这种方式就是类似拼接字符串的方式，

document.createElement()
最后一种方法就更加简单了，直接在(）内写标签名就好了，创建a标签就只写’a’。
例如在创建a标签：document.createElement('a');
创建多个a标签（利用追加孩子的方式创建）：

  for(var i=0;i<100;++i){
    		var a = document.createElement('a');
    		create.appednChild(a);
    	}

这种方法在创建单个标签时与第二种方法几乎没有差别，在日常的学习使用中都非常的普遍。但是在创建多个标签中二者的区别是非常大的，特别是在优化方面，第三种在创建的速度上明显块很多，性能更加优秀。
但是这还不是最好的创建多个标签的方法，我们在利用第二种方法创建的时候，利用拼接字符串的方式，显然是比较耗费时间的，而利用数组添加内容的方式则很好的避免了大量拼接字符串的问题。具代码如下

//首先定义一个数组
var arr = [];
      for(var i=0;i<100;++i){
      //利用push方法放入数组内部
        		arr.push('<a  href:"#">空地址</a>');
        	}
        	//再利用join方法将数组内容一次性转为字符串，解决！
        	div.innerHTML = arr.join(' ');