textContent 安全替换文字内容：element.textContent = "新内容"，只处理纯文本、防 XSS、清空子元素结构和事件监听器，IE9+ 全支持。
直接改 innerHTML 最快，但有 XSS 风险；想安全更新内容，优先用 textContent 或 createElement + appendChild。
怎么用 textContent 安全替换文字内容
它只处理纯文本，不解析 HTML，天然防脚本注入，适合显示用户输入或动态文本。
- 设置文本：
element.textContent = "新内容" - 读取当前文本：
const text = element.textContent - 注意：会清空子元素的所有 HTML 结构和事件监听器（如果有的话）
- 兼容性好，IE9+ 全支持
innerHTML 能否插入带标签的内容？能，但要自己把关
它把字符串当 HTML 解析并渲染，方便但危险——如果字符串含用户输入，可能执行恶意脚本。
- 插入结构：
element.innerHTML = "加粗和其他" - 常见错误：拼接用户数据如
innerHTML = "→ 可能触发" + userInput + "" - 若必须用，先做 HTML 转义（例如用
document.createElement("div").textContent = str再取innerHTML）
动态添加元素为什么推荐 createElement + appendChild
比拼接字符串更可控，避免转义遗漏，也便于后续操作（比如绑定事件、加 class、删节点）。
立即学习“Java免费学习笔记（深入）”；
- 创建并插入：
const p = document.createElement("p"); p.textContent = "这是新段落"; p.className = "note"; document.body.appendChild(p); - 批量插入时，用
DocumentFragment减少重排：const frag = document.createDocumentFragment(); ... frag.appendChild(p); parent.appendChild(frag); - 不要在循环里反复写
innerHTML += ...，性能差且会销毁已有事件监听器
真正难的不是“怎么改”，而是“改哪儿”和“什么时候改”——DOM 可能还没加载完，querySelector 就返回 null；异步更新后忘了清理旧监听器，导致内存泄漏。这些细节比语法更容易出问题。
