使用 Javascript 更改 Div 的文本

要更改 div 显示的文本，请先选中该元素，再将字符串赋给它的 textContent 属性。即使字符串包含 < 或 > 等字符，也会按纯文本处理。

使用 textContent 更改 div 的文本

在浏览器页面中，请将脚本放在目标元素之后，或等文档加载完成后再运行。选择器必须匹配到要更改的 div。

<div id="message">Welcome</div>
<script>
  const message = document.querySelector("#message");
  message.textContent = "Hello, world!";
</script>

上面的浏览器示例会更新实际页面。若要查看属性赋值及显示值的简短 JavaScript 示例，请运行：

const div = { textContent: "" };
div.textContent = "Hello, world!";
console.log(div.textContent);

Hello, world!

这个可运行示例通过普通对象展示属性赋值和输出；HTML 示例则演示如何更新实际页面。示例显示的字符串 Hello, world! 保持英文。将值赋给 textContent 会用包含新字符串的文本节点替换元素的子节点。如果目标是显示纯文本，尤其是值来自用户或其他不可信来源时，请使用它。

如何选择 textContent 或 innerHTML

显示文本时使用 textContent。innerHTML 会将赋给它的字符串解析为 HTML，并用解析得到的节点替换元素的子节点，因此只有在确实需要插入标记时才应选择它。将不可信数据插入会解析 HTML 的上下文可能带来跨站脚本风险；解析标记并不意味着每个字符串都会自动作为代码运行。

例如，将字符串 <strong>Hi</strong> 赋给 textContent 时，这些字符会原样显示；赋给 innerHTML 时，则会创建一个 strong 元素，让浏览器以粗体显示“Hi”。如果确实需要标记，请将它与不可信值分开，并采用适当的安全渲染方式。

使用其他 JavaScript 方法更新文本

innerText 可以获取或设置渲染后的文本，并可能受样式和布局影响；当这些渲染行为很重要时，可以使用它。对于直接替换文本的情况，textContent 通常更清晰。

构建 DOM 内容时，也可以使用 createTextNode 创建文本节点，并用它替换现有子节点。用反引号编写的模板字面量有助于组合动态字符串；将生成的字符串赋给 textContent，仍会按文本处理。如果页面已加载 jQuery，$("#message").text("Hello, world!") 会设置所选元素的文本。如果没有 jQuery，请使用上文所示的浏览器 DOM API。

使用 CSS 生成内容添加装饰性文本

CSS 的 ::before 和 ::after 伪元素可以添加视觉装饰，例如在元素旁显示一个小标签。生成内容不会通过 JavaScript 更新 div 的 DOM 文本，因此不适合承载重要信息或交互内容。包括 img 在内的一些替换元素，显示生成内容的方式与普通元素不同。如果文本需要成为页面的实际内容，请使用 textContent。