JS中使用innerHTML和createElement方式动态创建元素

矫情吗；* 2022-01-11 11:07 281阅读 0赞

**方式一：使用innerHTML拼接字符串方式**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>innerHTML拼接字符串方式</title>
        <style>
            div {
                width: 1000px;
            }
        </style>
        <script>
            window.onload = function() {
                var div = document.querySelector('div');
                var time1 = +new Date();
                for (var i = 0; i < 1000; i++) {
                    div.innerHTML += '<a href="javaScript:;">链接</a>\t';
                }
                var time2 = +new Date();
                console.log(time2 - time1);
            }
        </script>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>

运行结果：  
![JS中使用innerHTML和createElement方式动态创建元素][JS_innerHTML_createElement]

**方式二：innerHTML加数组的方式**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>innerHTML加数组的方式</title>
        <style>
            div {
                width: 1000px;
            }
        </style>
        <script>
            window.onload = function() {
                var div = document.querySelector('div');
                var arr = [];
                var time1 = +new Date();
                for (var i = 0; i < 1000; i++) {
                    arr.push('<a href="javaScript:;">链接</a>\t')
                }
                div.innerHTML = arr.join('');
                var time2 = +new Date();
                console.log(time2 - time1);
            }
        </script>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>

运行结果：  
![JS中使用innerHTML和createElement方式动态创建元素][JS_innerHTML_createElement 1]

**方式三：createElement方式**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>createElement方式</title>
        <style>
            div {
                width: 1000px;
            }
        </style>
        <script>
            window.onload = function() {
                var div = document.querySelector('div');
                var time1 = +new Date();
                for (var i = 0; i < 1000; i++) {
                    var a = document.createElement('a');
                    a.innerHTML = '链接';
                    a.href = 'javaScript:;';
                    div.appendChild(a);
                }
                var time2 = +new Date();
                console.log(time2 - time1);
            }
        </script>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>

运行结果：  
![JS中使用innerHTML和createElement方式动态创建元素][JS_innerHTML_createElement 2]

--------------------

**总结：**

*  innerHTML方式创建多个元素的时候效率会更高，但是不能使用字符串拼接的方式，使用字符串拼接的时候会不断开辟新的内存，所以时间长，可以使用数组的方式。
 *  createElement在创建多个元素的时候效率较低，但是结构更清晰。

转载于:https://blog.51cto.com/13701875/2410620

[JS_innerHTML_createElement]: https://s1.51cto.com/images/blog/201906/18/0f066b343f9ff642140c18df0997a2e4.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[JS_innerHTML_createElement 1]: https://s1.51cto.com/images/blog/201906/18/4e0b510b9ffe3a4c76923696bd3a0495.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[JS_innerHTML_createElement 2]: https://s1.51cto.com/images/blog/201906/18/556f29b21062c5b9105a9475995c1d47.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=