JavaScript创建元素

3种动态创建元素区别

1. document.write()
2. element.innerHTML
3. document.createElement()

区别：

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

window.onload=function(){document.write('<div>123</div>');

测速函数

function fn(f){
	var d1=+new Date();
	f();
	console.log(+new Date()-d1);
}

innerHTML创建元素（使用字符串拼接方法：用时1116毫秒）
测试循环+1万个，浏览器就卡住了，会有页面无响应弹窗

function cElement_IH_strConcat() {
    for (var i = 0; i < 1000; i++) {
        document.body.innerHTML += '<div style="width:100px;height:2px;border:1px solid blue;"></div>'
    }
}

function fn(f){
	var d1=+new Date();
	f();
	console.log(+new Date()-d1);
}

fn(cElement_IH_strConcat) //1166ms

使用createElement的方法：用时24ms，1万个用时133ms

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

fn(cElement_dom) // 24ms

使用innerHTML的数组转字符串方法：用时5ms，1万个用时34ms。

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

fn(cElement_IH_listPush) // 5ms