修改内容首选textContent防XSS，需HTML结构时用innerHTML并过滤；追加节点用createElement+appendChild更安全；改属性优先dataset和DOM属性，避免setAttribute("style")；精准替换用replaceChild。
直接修改 innerHTML 和 textContent 最常用
这两个是最直观的改内容方式，但行为差异很大：innerHTML 会解析 HTML 字符串，textContent 只当纯文本处理。比如设为 "<strong>hello</strong>"，前者显示加粗文字，后者原样输出标签字符。
常见错误是该用 textContent 防 XSS 却误用 innerHTML，尤其拼接用户输入时。反过来，想插入带样式的结构又只用 textContent，结果看不到效果。
- 动态更新一段说明文字？优先用
textContent - 要替换整个区块并保留子元素结构？用
innerHTML - 不确定来源是否可信？一律先
textContent，真需 HTML 再做白名单过滤
用 createElement + appendChild 增量添加节点
适合往已有容器里追加新内容，而不是全量替换。比反复写 innerHTML += ... 更安全、性能更好——后者会销毁重建所有子节点，丢失事件监听器和表单状态。
典型场景：加载更多列表项、实时日志输出、表单提交后追加成功提示。
立即学习“Java免费学习笔记（深入）”；
- 先用
document.createElement("li")创建节点 - 用
textContent或innerHTML设内容（注意 XSS） - 用
appendChild()或prepend()插入到目标父元素 - 批量插入多个节点时，建议用
DocumentFragment减少重排
setAttribute 和 dataset 改属性与自定义数据
改内容不只限于“文字”，还包括控制行为和样式的数据。比如切换按钮状态、标记已读、存 ID 映射等，都靠改属性实现。
setAttribute("class", "active") 和直接操作 className 效果类似，但 dataset 是专为 data-* 属性设计的接口，更语义化且自动处理驼峰转换。
- 改
src、href、disabled等标准属性，用setAttribute或对应 DOM 属性（如el.src = "..."） - 存业务数据，如
el.dataset.userId = "123"，之后取值就是el.dataset.userId - 避免用
setAttribute("style", "...")，应改el.style.color = "red"，更易维护
用 replaceChild 或 remove + insertBefore 精确替换节点
当需要把某个特定子元素换成另一个全新结构时，innerHTML 太粗暴，appendChild 又不对位。这时候就得用节点级操作。
比如表格中某一行要整体刷新、模态框内容按步骤切换、或者编辑态下把文本变成输入框——这些都依赖精准替换。
- 获取旧节点：
const oldNode = el.querySelector(".item") - 创建新节点：
const newNode = document.createElement("div") - 替换：
oldNode.parentNode.replaceChild(newNode, oldNode) - 或用
el.insertBefore(newNode, oldNode)插在前面，再oldNode.remove()
注意 replaceChild 要求新旧节点都是同一文档中的有效节点，跨 iframe 或已移除节点会报错 NotFoundError。
