jQuery 獲取元素文本與 HTML 內容的正確姿勢

問題場景

開發者嘗試用 innerHTML 替代 jQuery 的 .text() 方法獲取被選中元素的文字內容，但發現無法正常運作。

核心差異對照表

為什麼不能直接用 innerHTML 替代 .text()？

• .text() 返回的是去除所有 HTML 標籤後的純文字，跨瀏覽器相容性好。
• innerHTML 返回的是包含 HTML 標籤的字串，若元素內含巢狀標籤，結果會帶入標記碼。
• jQuery 物件 $("#text") 是集合，需用 [0] 取得原生 DOM 元素才能存取 innerText/innerHTML。

正確使用範例

// 獲取純文字
var pureText = $("#text").text();
// 或
var pureTextNative = $("#text")[0].innerText;

// 獲取 HTML 內容
var htmlContent = $("#text").html();
// 或
var htmlContentNative = $("#text")[0].innerHTML;

// 設定純文字（會自動轉義 HTML 標籤）
$("#text").text("<b>粗體</b>"); // 顯示為字面文字 "粗體"

// 設定 HTML（會解析標籤）
$("#text").html("<b>粗體</b>"); // 顯示為渲染後的**粗體**

最佳實務建議

• 優先使用 jQuery 方法（.text()、.html()），自動處理瀏覽器差異與 XSS 防護。
• 需高效能或無 jQuery 環境時，再考慮原生 textContent（標準，推薦）或 innerText（非標準但廣泛支援）。
• 設定內容時，不可信的使用者輸入務必用 .text() 或 textContent，防止 XSS 攻擊。