JavaScript 更改文字

在現有頁面中更改文字，第一步是選取正確的 DOM 元素。當元素具有已知且唯一的 id 時，請使用 getElementById()；它會依 ID 查找元素，而不是依類別名稱查找。HTML 文件中的 ID 應保持唯一；此方法會傳回一個元素，若找不到相符項目則傳回 null，而不是更新所有碰巧共用同一個 ID 的元素。

選取元素後，請決定新文字要取代目前內容，還是接在目前內容之後。textContent 是用來讀取或設定文字的屬性。createTextNode() 會建立文字節點，而 appendChild() 會將該節點附加至元素。

使用 textContent 更改元素文字

當元素應以新文字取代目前內容時，請設定 textContent。這個設定操作會以文字取代元素的子內容，不會將指定字串解讀為 HTML。如果字串包含 < 和 > 等字元，它們仍會是文字，不會變成標記。

這個完整範例包含簡單的元素替身，讓 JavaScript 能獨立執行。在瀏覽器頁面中，請使用 document.getElementById("message") 選取現有元素，再對它套用相同的指定方式。範例中的程式碼與顯示文字依規定保留英文。

執行此範例：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

class TextElement {
  constructor(textContent) {
    this.textContent = textContent;
  }
}

const elements = { message: new TextElement("Before") };
const document = {
  getElementById(id) {
    return elements[id] ?? null;
  },
};

const message = document.getElementById("message");
if (message) {
  message.textContent = "Hello, JavaScript!";
}
console.log(message.textContent);

這項檢查會處理找不到元素的情況：如果 ID 沒有相符項目，getElementById() 會傳回 null，因此不會執行指定操作。在應用程式中，你也可以明確處理這種情況，例如顯示錯誤，或確認指令碼是在元素加入文件後才執行。

使用 createTextNode() 和 appendChild() 附加文字

若要保留現有文字並在後面加入新文字，請建立文字節點，再將它附加至所選元素。這不會取代元素目前的子內容。以下獨立範例呈現相關的 DOM 操作；在瀏覽器中，請使用 document.createTextNode()，以及由 document.getElementById() 傳回的元素。範例中的程式碼與顯示文字依規定保留英文。

本節中的程式碼以及顯示的標籤或輸出仍為英文。

class TextElement {
  constructor(textContent) {
    this.textContent = textContent;
  }

  appendChild(node) {
    this.textContent += node.textContent;
    return node;
  }
}

const elements = { message: new TextElement("Hello, ") };
const document = {
  getElementById(id) {
    return elements[id] ?? null;
  },
  createTextNode(text) {
    return { textContent: text };
  },
};

const message = document.getElementById("message");
if (message) {
  const addedText = document.createTextNode("JavaScript!");
  message.appendChild(addedText);
}
console.log(message.textContent);

附加的節點會將其文字接在元素現有文字之後。若要在保留原有內容的同時加入簡短標籤、狀態訊息或其他文字，這種方式很實用。如果指令碼可能在目標元素建立前執行，請等到頁面建立該元素後再操作，或在附加節點前處理 null 的結果。

選擇要取代或附加的文字

當元素只應顯示新文字時，請使用 textContent = value。若要保留現有內容並將新文字接在後面，請搭配 appendChild() 使用 createTextNode(value)。這是兩種不同的操作：設定屬性會取代子內容，而附加節點會新增另一個子節點。

這兩種方式都會將指定值視為文字，而不是解析為 HTML。對於使用者提供的文字，透過這些 API 可避免將該值轉成標記；但這不能取代應用程式可能需要的其他安全措施。請使用目標元素的 ID 呼叫 getElementById()；如果頁面執行時機或條件式標記可能使元素不存在，請檢查是否找到相符項目，再依原有文字是否應保留，決定要附加新文字或取代原有內容。