三种动态创建元素区别

三种动态创建元素

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

区别

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

innerHTML效率测试（拼接）

<script>
    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();
</script>

运行时间

createElement效率测试

<script>
    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();
</script>

运行时间

innerHTML效率测试（不拼接）

<script>
    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();
</script>

运行时间

总结

不同浏览器下，innerHTML效率要比createElement高（不拼接数组的情况下）。