innerHTML与document.createElement的优缺点

    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()