JavaScript 中 `innerHTML +=` 的加號賦值運算子詳解

問題背景

在 JavaScript 中操作 DOM 時，經常會看到類似 element.innerHTML += "some content" 的寫法。初學者可能會疑惑：等號前面為什麼會有加號？這其實是 加法賦值運算子（Addition Assignment Operator）。

運算子含義

+= 是 a = a + b 的簡寫。對於字串來說，+ 代表字串連接。因此：

resultsElement.innerHTML += "there are " + elems.length + " span elements";

等同於：

resultsElement.innerHTML = resultsElement.innerHTML + "there are " + elems.length + " span elements";

為什麼要用 +=？

• 保留原有內容：若只用 =，會覆蓋掉原本 innerHTML 裡的所有內容。
• 追加新內容：+= 會在現有 HTML 字串尾端加上新字串，適合動態生成列表、日誌輸出等場景。

程式碼範例解析

原始程式碼中三次使用 += 分別透過不同 DOM 選取方式（getElementsByTagName、querySelectorAll、CSS 選擇器）統計 <span> 數量，並將結果追加顯示在 <pre id="results"> 中，最終頁面會呈現三行統計資訊。

注意事項

• 頻繁操作 innerHTML 可能觸發重排，效能較差；大量追加建議使用 DocumentFragment 或一次性設定。
• 若內容包含使用者輸入，需防範 XSS 攻擊，優先使用 textContent 或經過轉義。