1 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');
2 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()
