DOM-创建元素的三种方式

<button>点击</button>

    <p>abc</p>

    <div class="a"></div>

    <div class="b"></div>

    <script>

        //1、document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘

        // document.write("<div>123</div>");

        // var btn = document.querySelector("button");

        // btn.onclick = function(){

        //     document.write("<div>123</div>");

        // }

        //2、 innerHTML 创建元素  拼接字符串  每次开辟新的内存  效率慢 耗时间

        //var div1 = document.querySelector(".a");

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

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

        // }

        //innerHTML数组形式  结构稍微复杂  效率更高一点(no1)

        // var arr = [];

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

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

        // }

        // //console.log(arr);

        // div1.innerHTML = arr.join("");

 

        // 3. document.createElement() 创建元素 结构更清晰 比innerHTML数组形式效率低一点点

        var div2 = document.querySelector(".b");

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

            var create = document.createElement("a");

            div2.appendChild(create);

        }

 

    </script>