textContent用于安全读写纯文本，忽略HTML标签且防XSS；innerHTML用于解析并渲染含HTML结构的内容，但需防范XSS风险。
操作 DOM 节点的文本内容，核心在于区分“纯文本”和“含 HTML 的结构化内容”，并选用对应的安全、标准、兼容性合适的属性或方法。
用 textContent 读写纯文本
textContent 是最推荐的纯文本操作方式。它只处理可见文本，忽略标签、注释、脚本，也不解析 HTML，天然防 XSS，且是 W3C 标准属性。
- 读取：获取元素及其所有后代中的**可渲染文本内容**（不含换行缩进，会合并连续空白）
- 写入：直接替换整个文本内容，原有子节点（包括 HTML 标签）会被清空，仅保留纯文本
- 适合场景：表单提示、状态文案更新、日志输出、数据展示类静态文本
示例：
<div id="box">Hello <span>World</span>!</div>
const box = document.getElementById("box");<br>
console.log(box.textContent); // "Hello World!"<br>
box.textContent = "Updated"; // 页面显示纯文本，span 被移除
用 innerHTML 处理带格式的 HTML 内容
innerHTML 用于读写包含 HTML 标签的内容，支持结构渲染，但需警惕安全风险。
- 读取：返回元素内部完整的 HTML 字符串（含标签、空格、换行）
- 写入：浏览器会解析字符串并重建子节点，可动态插入按钮、列表、样式等
- ⚠️ 注意：若插入用户输入内容（如评论、搜索关键词），必须先做 HTML 转义（如将
示例：box.innerHTML = "<strong>Bold</strong> and <em>italic</em>"; // 渲染为加粗+斜体
避免使用 innerText（兼容性与行为不一致）
innerText 不是标准属性，由 IE 首创，现代浏览器虽支持但行为不统一：
立即学习“Java免费学习笔记（深入）”；
- 受 CSS 影响（如 display: none 的文本不计入）
- 会自动折叠空白符、忽略源码换行
- 在 Firefox 中对 script/style 标签内容也返回空字符串，而 Chrome 不一定
- 不适合精确控制或跨浏览器稳定逻辑
建议用 textContent 替代 innerText，除非明确需要其“视觉可见性”语义（极少见）。
精细控制文本节点：createTextNode + appendChild
当需要确保插入内容**绝对安全、零解析、零副作用**（比如渲染用户昵称、代码片段、JSON 字符串），可手动创建文本节点：
-
document.createTextNode("text")创建一个纯文本节点，不会被当作 HTML 解析 - 配合
appendChild或replaceChild插入到目标元素中 - 比 innerHTML 更底层、更可控，适合构建动态模板或防止意外注入
示例：
const span = document.createElement("span");<br>
const textNode = document.createTextNode("<script>alert(1)</script>");<br>
span.appendChild(textNode); // 页面显示原样字符，不执行脚本 
