三种动态创建元素的区别----关于Dom

  /* 三种动态创建元素的区别 */

        // 1 document.write()

        // 特点 是直接将内容写入页面的文档流，但是文档流执行完毕，则它会导致页面全部重绘  

        var btn = document.querySelector('button');

        btn.onclick = function() {

            document.write('<div>123</div>')

        }

        //2 element.innerHTML的方式

        var div = document.querySelector('div')

        for(var i=0; i < 100; i++){

            div.innerHTML += '<a href="#">百度</a>'

        }

        //执行效率极低，主要是因为使用了大量的字符串拼接，内存中需要重新开辟空间

        //3 document.creatElement()

        for(var i=0; i<100; i++){

            var a = document.createElement('a');

            div.appendChild(a);

        }

        // 执行效率高  比通过innerHTML方式好很多    下面是重点  下面是重点    下面是重点

        /* 接下来剧情反转的时刻到来 */

        var arr = [];

        for(var i=0; i<100; i++ ){

            arr.push('<a href="#">百度</a>');

        }

        div.innerHTML = arr.join('');

        //这种方式 执行效率更高

        /* 总结一下

             1，document.write()   会导致页面重绘，不建议使用

             2，inner.HTML 创建多个元素是效率会更高（不拼接字符串，采取数组形式拼接），但结构稍微复杂

             3，createElement（） 创建多个元素效率比innerHTML低，但结构清晰

         */