如何在 HTML 正文中顯示 JavaScript 變數

若要在頁面中將 JavaScript 變數顯示為文字，請選取一個現有的 HTML 元素，並將值指派給它的 textContent 屬性。這會更新文件正文中的元素；它不會開啟對話框。請將指令碼放在目標元素之後，或者安排它在文件解析完成後再執行。

使用 textContent 在 HTML 正文中顯示 JavaScript 變數

下面的範例將變數放入一個段落中。由於內嵌指令碼位於該段落之後，指派執行時 document.getElementById("greeting") 可以找到該元素。將 name 變更為您想顯示的值。然後瀏覽器會將 “Hello, Robert!” 作為普通文字呈現在頁面中。未修改的範例輸出保持英文。

執行此範例：

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

const output = { textContent: "" };
const document = {
  getElementById(id) {
    return id === "greeting" ? output : null;
  }
};
const name = "Robert";
document.getElementById("greeting").textContent = `Hello, ${name}!`;
console.log(output.textContent);

Hello, Robert!

這個小型的可執行範例使用了一個最小的元素替代品，以便指派可以在 JavaScript 執行環境中執行。在瀏覽器中，請使用如下所示的實際 DOM 元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Greeting</title>
</head>
<body>
  <p id="greeting"></p>
  <script>
    const name = "Robert";
    document.getElementById("greeting").textContent = `Hello, ${name}!`;
  </script>
</body>
</html>

對於純文字，textContent 是最清晰的選擇。它會將所選元素的子內容替換為文字，因此變數中類似標記的字元會被顯示出來，而不是被解析為 HTML。如果選取器沒有傳回任何元素，則需要留意頁面結構或指令碼時機：確保 ID 相符，並且目標在指派執行之前存在。文件 head 中的傳統外部指令碼可以使用 defer 在文件解析後執行。defer 不會延遲傳統內嵌指令碼；如果內嵌指令碼位於 head 中，請等到目標元素存在後再執行，例如監聽 DOMContentLoaded，或像上面的範例一樣將指令碼放在元素之後。

僅在插入可信 HTML 時使用 innerHTML

innerHTML 會將指派給它的值解析為標記，並替換元素的子節點。當預期值是您可控的 HTML 時（例如刻意建構的強調元素），這種行為很有用。對於名稱、訊息或其他純文字變數，請繼續使用 textContent；將外部或使用者提供的文字視為標記可能會造成跨站指令碼漏洞。

例如，將 "<strong>Hello</strong>" 指派給 textContent 會將角括號和標籤顯示為文字。將同一字串指派給 innerHTML 則會建立一個粗體的 Hello 元素。請根據該值應該是文字還是可信標記來選擇，並避免透過串連不可信的值來建構 HTML。

為什麼 document.write() 和 window.alert() 與正文文字輸出不等效

document.write() 是一個在瀏覽器解析頁面時向文件流寫入內容的方法。它在解析時執行的範例中可能看起來有效，但它並不適合用來更新現有元素。在文件載入完成後呼叫它可能會替換整個文件，因此請使用 textContent 等 DOM 方法來進行常規的頁面更新。

window.alert() 也是一個方法，但它顯示的是一個暫時的對話框，讀者必須將其關閉。它的值不會插入到頁面的 HTML 正文中，並且對話框開啟時會中斷互動。僅在對話框特別合適時才使用它；當目標是讓一個值一直顯示在頁面中時，請使用 textContent。