JS中三种动态创建元素方式的区别

岳泽以

发布于 2022-10-26 17:20:18

2.2K0

发布于 2022-10-26 17:20:18

文章被收录于专栏：岳泽以博客

document.wirte()

document.write('<div>345</div>');

直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘即加载一个新的html页面，且只包含写入的内容。

<body>
    <button>点击按钮</button>
    <p>123</p>
    <script>
        var btn = document.querySelector('button');
        btn.onclick = function () {
            document.write('<div>345</div>');
        }
    </script>
</body>

element.innerHTML

    <div class="inner">
    </div>
    <script>
        var inner = document.querySelector('.inner');
        inner.innerHTML = '<a href="#">百度</a>';
    </script>

innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘。
innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂。

    //数组形式拼接
        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('');

document.creatElement()

    <div class="inner">
    </div>
    <script>
        var inner = document.querySelector('.inner');
        var a = document.createElement('a');
        inner.appendChild(a);
    </script>

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

在不同的浏览器下，innerHTML如果采用数组拼接形式的话效率要比createElement高。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022 年 05 月，如有侵权请联系 cloudcommunity@tencent.com 删除

html