下面用 innerhtml 和 document.createelement()來建立元素，測試一下哪個效率比較好
="box"
>
<
/div>
// 效果1：測試用innerhtml 來建立元素並顯示到頁面需要用到的時間
// 將當前時間轉換成時間戳（毫秒，從2023年到現在）
var d1 =
+new
date()
;var box = document.
queryselector
('.box');
//建立次數
var count =
50000
;for
(var i =
0; i < count; i++
)var d2 =
+new
date()
; console.
log(d2 - d1)
;// 測試結果：耗時好幾秒，卡機有點久
// 說明：innerhtml用字串建立元素會因為宣告太多字串，字串不可變而導致瀏覽器載入速度緩慢
// 效果2：測試用createelement()方法來建立元素需要用到的時間
// 測試結果：建立50000個元素耗時0.2秒（電腦效能不一樣）
// 說明：使用createelement()方法來宣告元素會比較快速
var d3 =
+new
date()
;for
(var i =
0; i < count; i++
)var d4 =
+new
date()
; console.
log(d4 - d3)
;// 效果3：innerhtml用陣列來建立元素並新增到頁面中
// 測試結果：建立50000個元素耗時0.2秒(200毫秒).
// 說明：用陣列的形式來建立元素會比字串建立速度快，會比上面的方法還要快一點點
var d5 =
+new
date()
;var arr =
;for
(var i =
0; i < count; i++
)// 將陣列轉換成字串形式
box.innerhtml = arr.
join(''
);var d6 =
+new
date()
; console.
log(d6 - d5)
;<
/script>
JS建立元素的三種方式
1.innerhtml element.innerhtml 標籤字串 2.docuement.write document.write 標籤字串 3.document.createelement document.createelement 標籤名 三者區別 innerhtml 會覆蓋原來元素裡面的...
三種建立元素方式的區別
點選 button p abc p div class inner div div class create div script function 三種建立元素方式區別 1.document.write 建立元素 如果頁面文件流載入完畢，再呼叫這句話會導致頁面重繪 var btn document...
三種動態建立元素的區別
docment.write 是直接將內容寫入頁面的內容流，但是文件流執行完畢，則它會導致頁面全部重繪 innerhtml是將內容寫入某個dom節點，不會導致頁面全部重繪 innerhtml建立多個元素效率更高 不要拼接字串採取陣列形式拼接 結構稍微複雜 createelement 建立多個元素效率稍...