比較 innerText, textContent, innerHTML

一次看3語法差異(下圖)

figma-note
CodePen-note
HTMLElement.innerText
Node.textContent
Element.innerHTML

20230315

1. 取 節點 <td>0</td>的字串 0，不需要用到innerHTML。

因為 innerHTML 會連 HTML 的格式也一起取出。
若節點HTML格式變動成 <td><span>0</span></td>，節點.innerHTML就會取出<span>0</span>。
若 應用在程式碼 score變數 = 將(字串<span>0</span>)轉為數值 parseInt(字串)之後， score 變數存的值會是 NaN，因此 score >= 20 的值是 false。

2. 取 節點 <td>0</td>的字串 0，不需要用到innerText。

使用 innerText 和 textContent 程式都可以順利運作的話，

• 建議優先使用 textContent，
• 避免產生 回流reflow ，可以節省瀏覽器的效能。

因為 innerText 在某種程度上會計算CSS。 瀏覽器為了確保取得的 CSS 樣式是最新的，於是引發了回流。（文章：innerText 與 textContent）