innerhtml用于获取或设置元素内部html结构，会解析标签并渲染，但存在xss风险；textcontent仅处理纯文本，更安全高效。

innerHTML 是 JavaScript 中最常用、最直接修改元素内部 HTML 内容的方式。它允许你用字符串形式设置或读取一个元素的所有子节点（包括标签、文本、属性等），但使用时需注意安全性和适用场景。

基本用法：设置和读取内容

通过 element.innerHTML = "HTML 字符串" 可以完全替换目标元素的子内容；用 element.innerHTML（不赋值）可获取当前 HTML 结构。

• 设置内容：document.getElementById("box").innerHTML = "

  欢迎

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载
  点击";
• 读取内容：console.log(document.querySelector("#box").innerHTML); // 输出上面插入的 HTML 字符串

与 textContent 的关键区别

innerHTML 解析并渲染 HTML 标签，textContent 则只当纯文本处理（会显示标签字符本身）。

• 若设 el.innerHTML = "加粗" → 页面显示“加粗”，且是加粗样式
• 若设 el.textContent = "加粗" → 页面显示文字：“加粗”

常见注意事项和风险

innerHTML 虽方便，但直接拼接用户输入的内容极易引发 XSS（跨站脚本攻击）。

• ❌ 危险写法：el.innerHTML = "
  " + userInput + "
  "（userInput 若含 <script>alert(1)</script> 会被执行）
• ✅ 安全替代：el.textContent = userInput（纯文本） 或 先转义 HTML 特殊字符再用 innerHTML
• ⚠️ 动态插入含 <script></script> 标签的字符串时，脚本不会自动执行（这是浏览器限制，不是 bug）

适合用 innerHTML 的典型场景

适用于已知内容可信、结构较复杂、需要保留 HTML 样式或交互逻辑的情况。

• 从后端 API 获取富文本（如博客正文、邮件模板）并渲染
• 局部刷新列表项，比如用模板字符串生成一组带 class 和事件绑定的卡片
• 配合 template 标签预定义结构，再 clone 并注入数据

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南