DOM创建元素的三种方式

        document.write()

        element.innerHTML

        document.createElement()

区别：

        1.document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则会导致页面重绘。

        2.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘

        3.innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂。

        4.createElement()创建多个元素效率稍低一点点，但是结构更清晰

        总结：不同浏览器霞，innerHTML效率要比createElement高

<button>点击</button>
    <div class="innder"></div>
    <div class=".create"></div>
    
    <script>
        // 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
        var btn = document.querySelector('button');
         btn.onclick = function() {
             document.write('<div>123</div>');
         }


         // 2. innerHTML 创建元素
        var inner = document.querySelector('.inner');
        //  for (var i = 0; i <= 100; i++) {
        //      inner.innerHTML += '<a href="#">百度</a>'
        //  }
        // var arr = [];
        // for (var i = 0; i <= 100; i++) {
        //     arr.push('<a href="#">百度</a>');
        // }
        // inner.innerHTML = arr.join('');


        // 3. document.createElement() 创建元素
        var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }