DOM三种动态创建元素区别

最新推荐文章于 2022-06-01 15:31:44 发布

江南时雨

最新推荐文章于 2022-06-01 15:31:44 发布

阅读量202

点赞数 1

分类专栏： web API JS

本文链接：https://blog.csdn.net/qq_45441117/article/details/114376921

版权

JS 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

web API

13 篇文章 1 订阅

订阅专栏

DOM三种动态创建元素区别

看网上视频学习了 DOM三种动态创建元素区别：
1.document.write()
2.element.innerHTML
3.document.createElement()

提前总结：
1、document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则会导致页面全部重绘
2、innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘
3.innerHTML 创建多个元素效率更高（不要拼接字符串，采用数组形式拼接），结构稍微复杂
4、document.createElement()创建多个元素效率稍微低一点点，但是结构更加清晰
5、不同浏览器下 innerHTML 效率要比createElement 高
6、最后补充一点就是：我查阅MDN文档时发现当插入纯文本时innerHTML 存在一个安全问题。具体见MDN innerHTML的用法，这个在使用时应该要注意一下

一、.document.write()的使用

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

在这里插入图片描述
当点击按钮调用document.write()后，由于页面文档已经加载完毕，导致页面重绘

二、element.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>

可以看到使用innerHTML 创建1000个元素共使用了 900多毫秒
在这里插入图片描述
三、document.createElement()的使用：
使用document.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>

当使用 document.createElement() 创建1000个元素仅仅耗时14毫秒

在这里插入图片描述

四、innerHTML 采取数组的形式创建1000个元素：

<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>