三种动态创建元素的区别（js）

最新推荐文章于 2021-12-06 22:45:40 发布

~嘘~禁止想象~

最新推荐文章于 2021-12-06 22:45:40 发布

阅读量348

点赞数 1

分类专栏：前端 # JavaScript知识点文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_45773503/article/details/105945722

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

JavaScript知识点

36 篇文章 0 订阅

订阅专栏

三种动态创建元素的区别

document.write()

element.innerHTML

document.createElement()

A. 三种方式如何创建

<body>
    <button>bite</button>
    <p>abc</p>
    <div class="inner"></div>
    <div class="create"></div>
    <script>
         // 1. document.write() 创建元素
         var btn = document.querySelector('botton');
         btn.onclick = function() {
                 document.write('<div>123</div>');
             }

        // 2. innerHTML 创建元素
        var inner = document.querySelector('.inner');
        inner.innerHTML = '<a href="#">百度</a>'

        // 3. document.createElement() 创建元素 
        var create = document.querySelector('.create');
        var a = document.createElement('a');
        create.appendChild(a);
        a.href = '#';
        a.innerHTML = "搜狗";
    </script>
</body>

B. 区别（4点区别）：

1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘（其他的结构没有了只剩document.write写入的）

栗子：

<body>
    <button>bite</button>
    <p>abc</p>
    <script>
     /* 1. */  	window.onload = function() {/* 等页面加载完毕后，在写入 */
                	document.write('<div>123</div>');
            	}
            	
    /* 2. */ 	var btn = document.querySelector('botton');
             	btn.onclick = function() {
              		document.write('<div>123</div>');
             	}
    </script>
</body>

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

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

4. createElement 创建多个元素的效率稍微低一点点，但是结构更清晰

.
下面这三个测试来说明问题.（看运行时间）

innerHTML拼接效率测试（慢）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerHTML拼接效率测试</title>
    <style>
        div {
            width: 100px;
            height: 2px;
            border: 1px solid blueviolet;
        }
    </style>
</head>

<body>
    <script>
        function fn() {
            var d1 = +new Date(); /* +:转化成数字 */
            var str = '';
            for (var i = 0; i < 5000; i++) {
                document.body.innerHTML += "<div></div>"; /* 拼接字符串 */
            }
            var d2 = +new Date();
            console.log(d2 - d1);/* 看运行时间 */
        }
        fn();
    </script>
</body>

</html>

createElement效率测试（较快）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>createElement效率测试</title>
    <style>
        div {
            width: 100px;
            height: 2px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <script>
        function fn() {
            var d1 = +new Date(); /* +:转化成数字 */
            var str = '';
            for (var i = 0; i < 5000; i++) {
                var div = document.createElement('div');
                document.body.appendChild(div);
            }
            var d2 = +new Date();
            console.log(d2 - d1);
        }
        fn();
    </script>
</body>

</html>

innerHTML数组效率测试（非常快）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerHTML数组效率测试</title>
    <style>
        div {
            width: 100px;
            height: 2px;
            border: 1px solid blueviolet;
        }
    </style>
</head>

<body>
    <script>
        function fn() {
            var d1 = +new Date(); /* +:转化成数字 */
            var arr = [];
            for (var i = 0; i < 10000; i++) {
                arr.push("<div></div>");
            }
            document.body.innerHTML = arr.join('');
            var d2 = +new Date();
            console.log(d2 - d1);
        }
        fn();
    </script>
</body>

</html>

总结：不同浏览器下，innerHTML 效率要比 createElement 高

C.虚拟节点

    <ul></ul>
    <script>
        var ul = document.getElementsByTagName("ul")[0];
        var fragment = document.createDocumentFragment(); //创建虚拟节点
        for (var i = 0; i < 30; i++) {
            var li = document.createElement("li");
            li.innerHTML = "li" + (i + 1);
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);
    </script>

会比字符串拼接效率高

~嘘~禁止想象~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三种动态创建元素的区别（js）

目录三种动态创建元素的区别A. 三种方式如何创建B. 区别（4点区别）：1. document.write 是直接将内容写入页面的内容流，==但是文档流执行完毕，则它会导致页面全部重绘==2. innerHTML 是直接将内容写入某个 DOM 节点，不会导致页面全部重绘3. innerHTML 创建多个元素的效率更高（==不要使用拼接字符串，采取数组的形式拼接==），结构稍微复杂4. create...
复制链接

扫一扫