如何在 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。