content函数的用法：JavaScript 中 content 函数的用法详解

在 JavaScript 中，content 函数通常指的是操作 DOM 元素内容的方法，如 textContent、innerHTML 和 outerHTML，这些属性用于获取或设置元素的文本内容、HTML 内容或完整的 HTML 元素，本文将详细介绍这些函数的用法、区别以及注意事项。

textContent 的用法

textContent 用于获取或设置元素的，不包含任何 HTML 标签。

基本语法：

element.textContent = "新的文本内容";
const text = element.textContent;

示例：

<div id="myDiv">Hello <strong>World</strong>!</div>
<script>
  const div = document.getElementById("myDiv");
  console.log(div.textContent); // 输出：Hello World!
  div.textContent = "新的文本内容";
</script>

特点：

• 不解析 HTML，只显示纯文本。
• 会保留空格和换行符。
• 安全,不会导致 XSS 攻击。

innerHTML 的用法

innerHTML 用于获取或设置元素的HTML 内容，可以包含 HTML 标签。

基本语法：

element.innerHTML = "<新的HTML内容>";
const htmlContent = element.innerHTML;

示例：

<div id="myDiv">Hello <strong>World</strong>!</div>
<script>
  const div = document.getElementById("myDiv");
  console.log(div.innerHTML); // 输出：Hello <strong>World</strong>!
  div.innerHTML = "<p>新的 HTML 内容</p>";
</script>

特点：

• 可以包含 HTML 标签，支持动态生成内容。
• 可能存在安全风险（如 XSS 攻击），需注意输入内容的安全性。

outerHTML 的用法

outerHTML 用于获取或设置元素的完整 HTML 表达式，包括元素本身。

基本语法：

element.outerHTML = "<新的HTML元素>";
const outerContent = element.outerHTML;

示例：

<div id="myDiv">Hello World!</div>
<script>
  const div = document.getElementById("myDiv");
  console.log(div.outerHTML); // 输出：<div id="myDiv">Hello World!</div>
  div.outerHTML = "<p>New content</p>";
</script>

特点：

• 返回元素的完整 HTML 表达式，包括标签本身。
• 可以用于替换元素本身。

三者的区别

使用建议

1. 安全性来自用户输入，使用 textContent 可以避免 XSS 攻击。
2. 性能：频繁修改内容时，使用 textContent 性能更好。
3. ：需要插入 HTML 结构时，使用 innerHTML 或 outerHTML。

textContent、innerHTML 和 outerHTML 是 JavaScript 中操作 DOM 元素内容的重要函数，根据实际需求选择合适的函数，可以更高效、安全地操作网页内容。

希望本文能帮助你更好地理解和使用这些函数！