JavaScript三种动态元素创建的区别：document.write()；element.interHTML（）；document.createlement()

 目录

1、JavaScript中创建动态元素的三种方法：

 2、三种方法的区别：

 3、三种方式使用举例：

3.1 document.write()

3.2 element.innerHTML 创建元素

 3.3 document.createElement() 创建元素

4、三种方法比较 

4.1 关于重绘页面

1、document.write全部重绘

 2、element.innerHTML方法不重绘

 4.2 关于创建效率

1、innerHTML利用字符串直接创建元素

2、innerHTML利用数组创建多个元素

 3、creatElement()创建多个元素效率

1、JavaScript中创建动态元素的三种方法：

• document.write()
• element.innerHTML
• document.createElement()

document.write('');

element.innerHTML='';

document.createElement('');

 2、三种方法的区别：

1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
3. innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰

 3、三种方式使用举例：

3.1 document.write()

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

3.2 element.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.3 document.createElement() 创建元素

 var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }

4、三种方法比较 

4.1 关于重绘页面

1、document.write全部重绘

使用document.write是直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面全部重绘制

 window.onload = function () {
            document.querySelector('.btn00000').onclick = function () {
                document.write("<h1>ssss</h1>")
            }
        }

 点击class为btn00000的按钮，文档内容会重新绘制，最后只剩下 document.write的内容

 2、element.innerHTML方法不重绘

 var innner=document.querySelector('.inner')
        console.log(innner)
        innner.innerHTML='<a href="#">百度</a>'

document.createElement创建元素不会立即添加到文档，需要先获取添加的父元素，然后通过appendChild或insertBefore等方法插入

//添加节点
     var li21 = document.createElement('li')
    li21.innerHTML = 'li21'
    ul2.appendChild(li21)
    var li20 = document.createElement('li')
    li20.innerHTML = 'li20'
    ul2.insertBefore(li20, li21)

 4.2 关于创建效率

1. innerhHTML 和 creatElement()主要体现在效率方面。
2. 利用 innerhHTML 和 creatElement() 都可以创建新的元素。
3. innerHTML利用数组创建多个元素（再拼接为字符串）效率最高。
4. creatElement()创建多个元素效率其次，但是结构比较简单清晰。

1、innerHTML利用字符串直接创建元素

innerHTML利用字符串直接创建多个元素效率，创建1000个a标签用了 850毫秒左右（自测值）

<script>
    function timer() {
        var date1 = +new Date();
        for (var i = 0; i < 1000; i++) {
            document.body.innerHTML += '<a href="#">链接</a>';
        }
        var date2 = +new Date();
        var timed = date2 - date1;
        console.log(timed);
    }
    timer()
</script>

2、innerHTML利用数组创建多个元素

innerHTML利用数组创建多个元素效率，创建1000个a标签用了 10毫秒以内（自测值） 

<script>
    function timer() {
        var date1 = +new Date();
        var arr = [];
        for (var i = 0; i < 1000; i++) {
            arr.push('<a href="#">链接</a>');
        }
        document.body.innerHTML = arr.join('')
        var date2 = +new Date();
        var timed = date2 - date1;
        console.log(timed);
    }
    timer()
</script>

 3、creatElement()创建多个元素效率

creatElement()创建多个元素效率，创建1000个div标签用了 10毫秒以内（自测值），略大于利用innerHTML创建。

<script>
    function timer() {
        var date1 = +new Date();
        for (var i = 0; i < 1000; i++) {
            var div = document.createElement('div');
            div.style.width = '100px';
            div.style.height = '2px';
            div.style.border = '1px solid red';
            document.body.appendChild(div);
        }
        var date2 = +new Date();
        var timed = date2 - date1;
        console.log(timed);
    }
    timer()
</script>