[TOC]

就innerHTML这种采用字符串拼接生成dom的方式更加方便，并且效率更高。
但是那原生的createElement又有什么优势呢？
1.createElement，当元素插入后仍然保留对dom元素的指针。而innerHTML插入后，并没有对dom元素的指针，你需要再通过getElementById重新选取。
2.createElement能够获得事件处理函数，而innerHTML生成的新dom无法获得原先设置的事件处理函数。

3.某些情况下，createElement更加快速。比如如果你需要反复操作字符串，在每次处理后再次插入。每次插入都将进行解析与制作dom，在性能上会很差。

//下面代码性能很差，因为字符串的拼接耗时
var staDate = new Date();
for(var i=0;i<100;i++){
var str=”

test
";
my$("dv").innerHTML += str;
}
alert(new Date - staDate); //18
//当有大量字符串拼接的时候createElement效率更高
var staDate = new Date();
var doc = window.document;
for(var i=0;i<100;i++){
var oDiv = doc.createElement("div");
var oText = doc.createTextNode("text");
oDiv.appendChild(oText);
my$("dv").appendChild(oDiv);
oDiv.style.id = "div_"+i;
oDiv.style.width = "100px";
oDiv.style.height = "20px";
oDiv.style.backgroundColor = "#eee";
}
alert(new Date - staDate); //2
//测试2 ： createElement效率

//测试2 ： innerHTML效率，使用数组的方式避免字符串的大量拼接

//此时可以发现两种方式的性能差距不是特别大
4.可读性与可维护上createElement会优秀一些