技術標籤：js技術類js

概述

js節點操作中有三種方式來動態建立元素，分別為：

1. document.write()
2. element.innerHTML
3. document.createElement

採用以上三種方式會有不同的優缺點，為了在不同的場景下更為恰當的選擇方法來建立元素，接下來對這三種方式進行分析總結。

1. document.write()

使用方法

document.write('<div>This is a Test</div>');

作用

在頁面文件新增元素

使用弊端

當頁面文件流載入完成之後，再呼叫該語句會造成頁面重繪，場景如下：

<div>原來存在的頁面元素</div>
<button>點選我增加新元素</button>
<script>
    document.querySelector('button').onclick = function () {
        document.write('<div>This is a Test</div>');
    }
</script>
 

出現的頁面效果為：

此時頁面文件流已經載入完畢，再點選按鈕，出現以下情況：

檢查頁面元素：

從上可以發現，之前的頁面文件元素被重寫

總結

如果非必須的情況下，不建議使用該方法建立元素，原因：

1. 邏輯性不強
2. 操作失誤容易導致整個頁面被重寫

2. element.innerHTML

使用方法

<div></div>
<script>
    document.querySelector('div').innerHTML = '<a href="#">新新增的</a>';
</script>

作用

為某個元素內新增子元素

使用效率分析

1. 採用字串拼接的方式
   假如有以下應用場景，需要新增1000個元素

<div></div>
<script>
   var newDate = new Date();
   for (var i = 0; i < 1000; i++) {
       document.querySelector('div').innerHTML += '<a href="#">新新增的</a>';
   }
   var oldDate = new Date();
   console.log(oldDate - newDate);
</script>
 

設想下，如果要完成以上的操作，瀏覽器需要花多少秒？
執行以上程式碼：

可以看到，總共需要花費1秒多，將近2秒。出現這種情況的原因主要為：字串是不可變的，每次建立新的字串都需要開闢新的空間進行儲存資料，因此新增1000個元素，也即需要開闢1000個空間，所以當資料量不斷增加的時候，效率會變得越來越低。

2. 採用陣列拼接的方式
   同樣是新增1000個元素，這時採用陣列拼接的方式進行，程式碼如下：

<div></div>
<script>
    var arr = [];
    var newDate = new Date();
    for (var i = 0; i < 1000; i++) {
        arr.push('<a href="#">新新增的</a>');
    }
    document.querySelector('div').innerHTML = arr.join('');
    var oldDate = new Date();
    console.log(oldDate - newDate);
</script>

執行結果如下：

可以看到，此時瀏覽器完成以上操作僅需0.005秒，相比字串的拼接效率大大升高。

總結

1. 資料量比較小的情況下：兩種方式都可以採用
2. 資料量比較大：建議採用陣列拼接的方式

3. document.createElement

使用方法

<div></div>
<script>
    var a = document.createElement('a');
    var div = document.querySelector('div');
    div.appendChild(a);
</script>

作用

給某一元素新增子元素

使用效率分析

同樣考慮新增1000個元素的場景，程式碼如下：

<div></div>
<script>
    var div = document.querySelector('div');
    var newDate = new Date();
    for (var i = 0; i < 1000; i++) {
        var a = document.createElement('a');
        div.appendChild(a);
    }
    var oldDate = new Date();
    console.log(oldDate - newDate);
</script>

執行結果如下：

可以看到執行時間還是比較低的。

總結

1. 非必須情況不建議使用document.write()
2. 雖然innerHTML方式的陣列拼接方法與createElement效率差不多，但是當資料量很大的情況下， 不同瀏覽器下，innerHTML效率比createElement高，讀者可以自行下去實踐。