本篇文章目錄

1. 前言：算出了數字，然後呢？DOM 渲染的兩大途徑
2. textContent vs innerHTML 核心差異比較
3. 實戰應用：計算 BMI 評語並渲染至馬卡龍卡片
4. 為什麼在醫療工具箱中我堅持使用 textContent？
5. 結語

一、 前言：算出了數字，然後呢？DOM 渲染的兩大途徑

在 Day 09 與 Day 10 中，我們成功算出了 BMI、BMR 與 TDEE 的精準數值。然而，單純呈現「24.5」這個數字對使用者來說是不夠的——我們還需要告訴他這個數字代表「正常」還是「過重」。

在 JavaScript 中，要把這些文字與標籤寫回網頁畫面上，最常用的是 textContent 與 innerHTML。今天我們就來剖析這兩者的差異，並為 Tool 1 加上第一個版本的 BMI 狀態提示！

二、 textContent vs innerHTML 核心差異比較

三、 實戰應用：計算 BMI 評語並渲染至馬卡龍卡片

根據衛福部標準，我們在 JS 中加入判斷邏輯，並透過 textContent渲染文字：

/tool1-calculator.j

四、為什麼在醫療工具箱中我堅持使用 textContent？

在開發《醫藥健康數位工具箱》時，軟體品質與安全性是重要考量：

防範潛在安全漏洞 (XSS Attack)：

textContent 在將文字寫入 DOM 時，會自動將 < 或 > 等特殊符號轉義（Escape）。即使未來輸入框被惡意輸入了 alert('hack')，textContent 也只會把它當作純文字印出來，而不會在使用者瀏覽器上執行惡意程式碼。

極佳的執行效能：

因為我們只需要更新數值標籤內部的「文字內容」，textContent 不需要觸發 HTML 解析器重新建構 DOM 樹，對於手機端或低配備裝置而言，UI 渲染更滑順、無延遲感。

五、結語

今天我們理解了 textContent 與 innerHTML 的使用時機。純文字我們堅持使用最安全的 textContent；而在需要強調重點文字（如加粗 <strong>）時，則善用 innerHTML。

雖然現在能顯示「健康體位」或「體重過重」了，但卡片顏色看起來還是一模一樣。在明天的 [Day 12] 中，我們將利用 classList 讓卡片根據 BMI 狀態動態變色（綠/黃/紅）