前言：

在DOM節點操作中，innerTHML和createElement都可以實現建立元素。它們實現的功能類似，但是效率卻相差很大。本文分別統計用innerTHML字串拼接方式、innerTHML陣列方式和createElement方式建立1000次元素的時間，來比較它們之間效率的高低。

比較思路：

1. 使用new呼叫建立日期物件
2. 完成1000次建立相同元素後的時間，減去建立之前的時間，即為過程所用的時間（單位：ms）
3. 比較三種方式所用的時間

比較過程：

1. innerTHML字串拼接方式

程式碼：

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();
 

所用時間：
（重新整理頁面測試3次）

2. innerTHML陣列方式

程式碼：

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();
 

所用時間：
（重新整理頁面測試3次）

3. createElement方式

程式碼：

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();
 

所用時間：
（重新整理頁面測試3次）

總結：

1. 顯然，三種方式所用的時間：
   innerTHML字串拼接方式 >> createElement方式 > innerTHML陣列方式
2. 則三種方式的效率高低：
   innerTHML陣列方式 > createElement方式 > innerTHML字串拼接方式
3. 可以根據實際情況需要，選擇合適的方式