innerHTML用于获取或设置元素内部HTML结构，会解析标签并渲染，但存在XSS风险；textContent仅处理纯文本，更安全高效。
innerHTML 是 JavaScript 中最常用、最直接修改元素内部 HTML 内容的方式。它允许你用字符串形式设置或读取一个元素的所有子节点（包括标签、文本、属性等），但使用时需注意安全性和适用场景。
基本用法：设置和读取内容
通过 element.innerHTML = "HTML 字符串" 可以完全替换目标元素的子内容；用 element.innerHTML（不赋值）可获取当前 HTML 结构。
- 设置内容：document.getElementById("box").innerHTML = "<p>欢迎</p><button>点击</button>";
- 读取内容：console.log(document.querySelector("#box").innerHTML); // 输出上面插入的 HTML 字符串
与 textContent 的关键区别
innerHTML 解析并渲染 HTML 标签，textContent 则只当纯文本处理（会显示标签字符本身）。
- 若设 el.innerHTML = "<strong>加粗</strong>" → 页面显示“加粗”，且是加粗样式
- 若设 el.textContent = "<strong>加粗</strong>" → 页面显示文字：“<strong>加粗</strong>”
常见注意事项和风险
innerHTML 虽方便，但直接拼接用户输入的内容极易引发 XSS（跨站脚本攻击）。
立即学习“Java免费学习笔记（深入）”；
- ❌ 危险写法：el.innerHTML = "<div>" + userInput + "</div>"（userInput 若含
<script>alert(1)</script>会被执行） - ✅ 安全替代：el.textContent = userInput（纯文本） 或 先转义 HTML 特殊字符再用 innerHTML
- ⚠️ 动态插入含
<script>标签的字符串时，脚本不会自动执行（这是浏览器限制，不是 bug）
适合用 innerHTML 的典型场景
适用于已知内容可信、结构较复杂、需要保留 HTML 样式或交互逻辑的情况。
- 从后端 API 获取富文本（如博客正文、邮件模板）并渲染
- 局部刷新列表项，比如用模板字符串生成一组带 class 和事件绑定的卡片
- 配合
template标签预定义结构，再 clone 并注入数据
