innerHTML、createElement（）、document.write（）三者对比

素心如月桠

已于 2022-04-05 19:43:17 修改

阅读量194

点赞数

文章标签： javascript

于 2021-05-10 18:20:54 首次发布

本文链接：https://blog.csdn.net/m0_47010003/article/details/116604211

版权

html 同时被 3 个专栏收录

43 篇文章 13 订阅

订阅专栏

vscode

35 篇文章 2 订阅

订阅专栏

JavaScript

34 篇文章 3 订阅

订阅专栏

在这里插入图片描述

innerHTML创建多个元素效率更高，但要注意不要拼接字符串，要采取数组形式拼接

 <script>
        var inner = document.querySelector('.inner');
        var arr = [];
        for (var i = 0; i < 100; i++) {
            arr.push('<a href="#">百度</a>')
        }
        inner.innerHTML = arr.join('');

    </script>

比以下两种方式代码运行速度快

<body>
    <div class="inner">

    </div>
    <div class="create">

    </div>
    <script>
        var inner = document.querySelector('.inner');
        // var arr = [];
        // for (var i = 0; i < 100; i++) {
        //     arr.push('<a href="#">百度</a>')
        // }
        // inner.innerHTML = arr.join('');
        
        for(var i=0;i<=100;i++){
            inner.innerHTMl+='<a href="#">百度</a>';
        }


        
         var create =document.querySelector('.create');
         for(var i=0;i<=100;i++){
             var a=document.createElement('a');
             create.appendChild(a);

         }
    </script>
</body>