js动态创建元素方法的区别

documen.write()
用的少
直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面重绘
类似 window.onlond() = function{} //整个页面加载完成再调用js

inner.innerHTML
document.createElement()

<div class = "inner">...</div>
<div class = "create">...</div>

var inner = document.querrySelector('.inner')
var create = document.querrySelector('.create')

inner.innerHTML = '<a href="#">hello</a>'

var a = document.createElement('a')
create.appendChild(a)

创建单个元素时，两者没有什么差别

创建1000次
innerHTML 3000毫秒（字符串拼接）

    function fn() {
        var d1 = +new Date();

        var str = '';
        for (var i = 0; i < 1000; i++) {
            document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();

.createElement() 20毫秒

    function fn() {
        var d1 = +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 d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();

innerHTML 10毫秒以下（数组）

    function fn() {
        var d1 = +new Date();
        var array = [];
        for (var i = 0; i < 1000; i++) {
            array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
        }
        document.body.innerHTML = array.join('');
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();