91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JS中使用innerHTML和createElement方式動態創建元素

發布時間:2020-07-27 08:41:10 來源:網絡 閱讀:363 作者:Cherish純紫 欄目:開發技術

方式一:使用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方式動態創建元素

方式二: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方式動態創建元素

方式三: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方式動態創建元素


總結:

  • innerHTML方式創建多個元素的時候效率會更高,但是不能使用字符串拼接的方式,使用字符串拼接的時候會不斷開辟新的內存,所以時間長,可以使用數組的方式。
  • createElement在創建多個元素的時候效率較低,但是結構更清晰。
向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

南宫市| 庆云县| 新营市| 双城市| 宁国市| 巫山县| 克山县| 富川| 钟山县| 井陉县| 筠连县| 滦南县| 永丰县| 清水县| 广灵县| 晋宁县| 七台河市| 项城市| 固始县| 贵州省| 台东市| 故城县| 克什克腾旗| 盈江县| 滨州市| 乐平市| 高淳县| 深泽县| 拉孜县| 徐闻县| 宁化县| 闸北区| 商南县| 监利县| 康保县| 石渠县| 泰安市| 皮山县| 三原县| 阿鲁科尔沁旗| 潞城市|