jQuery 插入內容：text() 與 html()

在元素中讀取或插入新內容，是 jQuery DOM 操作 最常用到的一組方法。兩者的差別只有一個：要不要把字串當成 HTML 解析 。

text()

讀取

讀取指定元素中的文字內容。它會把該元素底下所有後代的文字串接起來，連同換行與縮排的空白一起回傳。

text();

範例

HTML

<div id="Dom">
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
  </ul>
</div>

JavaScript

const str = $('#Dom').text();

/*
  List Item 1
  List Item 2
  List Item 3
  List Item 4
  List Item 5
*/
console.log(str);

設定

在指定的元素中插入文字內容。原本的子元素會被整段替換掉。

text(text);

參數

功能	說明	型別	範例	備註
text	文字內容	String	'Hello jQuery'	必填

範例

HTML

<div id="Dom">DOM</div>

JavaScript

$('#Dom').text('Hello jQuery');

html()

讀取

讀取指定元素中的 HTML 內容。

html();

範例

HTML

<div id="Dom">
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
  </ul>
</div>

JavaScript

const code = $('#Dom').html();

/*
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
  </ul>
*/
console.log(code);

設定

在指定的元素中插入 HTML 內容，字串會被解析成真正的 元素 。

html(htmlString);

參數

功能	說明	型別	範例	備註
htmlString	HTML 內容	String	'<h1>Hello jQuery</h1>'	必填

範例

HTML

<div id="Dom">DOM</div>

JavaScript

$('#Dom').html('<h1>Hello jQuery</h1>');

內容來源要可信

html() 會執行插入內容中的標籤，若內容來自使用者輸入或外部服務，就可能被塞進惡意的腳本（XSS）。只要放的是純文字，就改用 text() 最安全。

常見問題

text 和 html 差在哪？

text() 只處理純文字，標籤會被當成字串原樣顯示；html() 則會把字串解析成真正的 HTML 結構插進去。

為什麼建議優先用 text？

html() 會執行插入內容中的標籤，若內容來自使用者輸入或外部服務，就可能被塞進惡意的腳本。只要放的是純文字，就用 text() 最安全。

讀取時會拿到什麼？

text() 會把該元素底下所有後代的文字串接起來，連同換行與縮排的空白一起回傳；html() 則回傳第一個元素內部的 HTML 字串。相關的原生屬性可參考 節點的屬性 。

設定內容會蓋掉原本的東西嗎？

會。兩者都是整段替換，原本的子元素會全部被移除。若只是要在既有內容後面補上東西，應改用 append() 這類插入方法。

選到多個元素時的行為一樣嗎？

不一樣。讀取只會拿第一個元素的內容（text() 例外，它會串接集合中所有元素的文字），設定則會套用到集合中的每一個元素。

延伸閱讀

CSS 類別什麼是 DOM 操作？節點的屬性物件樹遍歷

參考資料：jQuery API：Manipulation