创建元素的三种方法document.write() element.innerHTML document.createElement()及对比

最新推荐文章于 2024-08-26 17:50:05 发布

原创最新推荐文章于 2024-08-26 17:50:05 发布 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

这篇博客探讨了在JavaScript中创建和修改DOM元素的三种常见方法：document.write、innerHTML和createElement。文章指出，document.write在页面加载完成后使用会导致页面重绘；innerHTML用于更新元素内容，不会重绘整个页面，但字符串拼接效率较低；而createElement虽然效率稍低，但结构更清晰。通过示例代码展示了不同方法的性能差异，innerHTML的数组拼接方式在效率上优于字符串拼接。

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

    <script>
        // 三种创建元素方式区别 
        // 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
         var btn = document.querySelector('button');
         btn.onclick = function() {
             document.write('<div>123</div>');
         }

        // 2. 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. document.createElement() 创建元素
        var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }
    </script>

区别：

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

2.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘。

3.innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍复杂。

4.creatElement() 创建多个元素效率稍微低一点，但是结构更清晰。

不同浏览器下，innerHTML的效率比creatElement高

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>