HOWTO · jQuery
如何在 jQuery 中更改文字
使用 jQuery 的 text() 方法讀取元素的文字，或將其取代為新文字，既可直接取代，也可在回應點擊時取代。
本頁內容
使用 jQuery 的 text() 方法讀取所選元素中的文字，或為元素設定新文字。不帶引數呼叫 .text() 可讀取文字；傳入字串則會取代所選元素的文字內容。
jQuery 中的 text() 方法
不帶引數的 .text() 是讀取器（getter）：它會傳回所有符合條件元素的合併文字內容。例如，若頁面包含 <p id="line">It's a line.</p>，呼叫 $('#line').text() 會傳回 It's a line.。這個呼叫會讀取目前的文字，不會設定值。
傳入值時，.text(value) 是設定器（setter）。它會更新所有符合條件元素的文字內容，並傳回 jQuery 集合，因此可以串接其他方法。傳入的值會被視為文字，所以 <strong> 等標記字元會以文字顯示，而不會解析成 HTML。只有在確實要設定標記，且已安全處理任何不受信任的輸入時，才使用 .html()。
使用 jQuery 的 text() 方法直接變更文字
在瀏覽器頁面中，載入 jQuery，並在文件載入完成後執行設定器。以下 Node 範例使用簡易替代物模擬頁面與 jQuery 選取，因此相同呼叫可獨立執行。範例從文字為「Text」的段落開始，設定其文字，並印出結果：
const document = {};
const elements = { '#title': { text: 'Text' } };
function $(selector) {
if (selector === document) {
return { ready(callback) { callback(); } };
}
const element = elements[selector];
return {
text(value) {
if (value === undefined) return element.text;
element.text = value;
return this;
}
};
}
$(document).ready(function() {
$('#title').text('New Text');
});
console.log($('#title').text());
New Text
在實際頁面中，可搭配 <p id="title">Text</p>，於 ready 回呼中使用相同的 $('#title').text('New Text') 設定器。回呼執行時，段落會顯示「New Text」。Node 替代範例用來說明這個方法呼叫；在瀏覽器中使用時，頁面本身仍須載入 jQuery。
使用 jQuery 的 text() 方法透過點擊事件變更文字
若要在點擊後更新文字，請為按鈕綁定處理函式，並在其中對目標段落呼叫 .text()。以下獨立的 Node 範例會模擬段落與按鈕，再呼叫已註冊的處理函式，以顯示點擊前後的文字：
const document = {};
const elements = {
'#title': { text: 'Text' },
'#press': {}
};
const handlers = {};
function $(selector) {
if (selector === document) {
return { ready(callback) { callback(); } };
}
const element = elements[selector];
return {
text(value) {
if (value === undefined) return element.text;
element.text = value;
return this;
},
click(callback) {
handlers[selector] = callback;
return this;
}
};
}
$(document).ready(function() {
$('#press').click(function() {
$('#title').text('Text Altered');
});
});
console.log($('#title').text());
handlers['#press']();
console.log($('#title').text());
Text
Text Altered
在瀏覽器中，請搭配 <p id="title">Text</p> 和 <button id="press">Text Change</button> 使用該處理函式，並確保在指令碼執行前已載入 jQuery。段落一開始會顯示「Text」；點擊按鈕後會變成「Text Altered」。選取器中的 ID 必須與頁面元素相符，處理函式才能更新預期的段落。
