再探讨innerHTML和createElement

用innerHTML有一个问题是代码不够直观，有逻辑判断的时候情况更明显。所以创建DOM结构的时候我一般用createElement，适当的结合innerHTML。createElement的好处是程序结构清晰，直接利用执行createElement后返回的element对象，不需要用selector。比如下面的代码用全部都用innerHTML肯定很别扭。

var div = document.createElement('div');
if (type == 'xx') {
div.className = 'your-class-name-1';
} else {
div.className = 'your-class-name-2';
}
div.onclick = function() { alert(1); };
div.innerHTML = 'xxxxx';
document.body.appendChild(div);

从来没有绝对的方法，其实在实际开发中，我们都是针对具体的情况具体考虑解决方案的，

你没有考虑到这样一个问题， 当div内部原先有一部分东西的时候，你在这个div中添加东西的时候你就需要将原先的innerHTML与添加后的字符串拼接起来再赋给这个div的innerHTML属性，先不考虑字符串的拼接效率，如果原来的div中有很复杂的内容的时候（例如有多幅图片或者flash等等）， 你重新对innerHTML进行赋值的话就需要重新对这个div的内容进行初始化，效率就会降到很低，而createElement和appendChild操作不会进行重新初始化，也就是说不管原先的div中有任何东西，多么复杂这两个函数的效率都没什么变化。所以说当对原先没有内容或原先的内容比较简单初始化也不费时的操作的情况下innerHTML的性能才优于createElement和appendChild，所以还是要考虑实际情况的。所以我个人认为还是在考虑实际情况的前提下混合这两种方式来使用。

嗯，楼上考虑问题比较全面，其实我在前面已经谈到了，真正的开发中，我们会根据实际情况来决定采取哪一种方式的，不是吗？

我对这个问题的再次探讨完全是因为一次面试问到这个问题，所以决定作具体的测试来得到数据证明，

给楼上一个建议，如果能够针对你提的情况提供数据上的支持，显然更好了，O(∩_∩)O~

非常好，以前一直没注意这些问题，学习了，敬佩楼主测试的精神，感谢

小弟在这里还有个问题：对于大量的字符串，array.push()方法好吗？

如果有大量的节点要生成，
1.能够从模版cloneNode最好
2.第二考虑innerHTML
3.其余时间考虑createElement

qufulin说的"如果原来的div中有很复杂的内容的时候"我在实际开发中还真没感觉到慢

不错，测试非常重要，好程序都是测试出来的