innerHTML：
优点：
可以指定位置创建元素
进行复杂结构创建时操作较为简便:
缺点：
覆盖问题(解决不了)：虽然尝试使用+=方式解决，但是只能解决结构的问题，没有获取到所有的事件等内容。
性能问题(已解决)：
假如我们给box内部动态创建200个空div:
console.time('innerHTML');
var box = document.getElementById('box');
for (var i = 0; i < 200; i++) {
box.innerHTML += ' ';
}
console.timeEnd('innerHTML');
通过对比，我们看到innerHTML进行元素创建操作的执行速度慢，具有性能问题。
上面的小测试创建200个div用时155.400146484375ms
innerHTML属性执行效率问题的解决方式：
避免使用innerHTML重复执行多次(不在循环中使用即可) (以下两种方式任选其一即可)
1 使用字符串替代执行 - 2ms左右
console.time('innerHTML');
var box = document.getElementById('box');
var str = '';
for (var i = 0; i < 200; i++) {
str += ' ';
}
box.innerHTML = str;
console.timeEnd('innerHTML');
2 使用数组替代执行 - 2ms左右
console.time('innerHTML');
var box = document.getElementById('box');
var arr = [];
for (var i = 0; i < 200; i++) {
arr.push(' ');
}
box.innerHTML = arr.join('');
console.timeEnd('innerHTML');
document.createElement() - 用于创建一个元素
- 参数：字符串形式的标签名称
效果：创建的元素默认不在页面中显示，需要根据实际的需求，添加到页面中的某个位置上。
var box = document.getElementById('box');
for (var i = 0; i < 200; i++) {
var div = document.createElement('div');
box.appendChild(div);
}
console.timeEnd('createElement');
用时 4.1279296875ms - 用于与innerHTML做性能对比使用
缺点：
- 如果使用document.createElement()创建复杂结构，操作较为繁琐
动态创建元素部分的小结：
- 使用场景：
- 如果结构复杂，使用innerHTML
- 其他情况均可以使用document.createElement()
- 如果要进行元素创建的结构内部已经具有其他元素，必须document.createElement()