优先用textContent改纯文本，安全高效；插入HTML结构时用createElement+appendChild组合，避免innerHTML隐患；确保DOM加载完成后再操作，防止找不到元素或事件丢失。
直接改 innerHTML 最快，但有安全和性能隐患；真要动态更新内容，优先用 textContent、createElement + appendChild 组合。
怎么安全地替换一段文字内容
如果只是改纯文本（比如标题、提示语），别碰 innerHTML —— 它会重新解析 HTML，可能执行意外脚本，还会清空已绑定的事件监听器。
- 用
textContent：只改文字，不解析 HTML，速度快，无 XSS 风险 - 用
innerText：受 CSS 影响（比如display: none的元素不参与），且有兼容性差异，一般不用 - 示例：
document.getElementById('title').textContent = '新标题';
怎么插入带标签的新内容
需要插入结构（比如加个 <div><p>...</p></div>），就不能只靠 textContent 了。此时得构造节点再挂载。
- 避免拼接字符串后赋给
innerHTML，尤其内容来自用户输入或 API - 推荐流程：
document.createElement('div')→el.textContent = ...或el.appendChild(...)→parent.appendChild(el) - 若必须用
innerHTML（如渲染富文本预览），先用DOMPurify.sanitize(htmlStr)过滤
为什么 getElementById 找不到元素
不是语法错，大概率是脚本执行时机不对 —— DOM 还没加载完就去查元素。
立即学习“Java免费学习笔记（深入）”；
- 确保代码在
DOMContentLoaded事件后运行：document.addEventListener('DOMContentLoaded', () => { /* 操作DOM */ }); - 或者把
<script>标签放在</body>前 - 检查 ID 是否拼写一致（区分大小写），且页面中唯一
- 动态生成的元素（如通过 JS 插入）需在插入后才能被查到
修改后事件监听器丢了？
只要用了 innerHTML = ... 或 outerHTML = ...，原节点就被整个替换了，上面所有 addEventListener 全部失效。
- 解决办法一：用
textContent/setAttribute等“局部更新”方法，不破坏节点本身 - 解决办法二：事件委托 —— 把监听器挂在父级，用
e.target判断实际点击对象，适合列表类动态内容 - 示例：
listEl.addEventListener('click', e => { if (e.target.matches('.item-btn')) { ... } });
DOM 操作看着简单，真正难的是控制副作用：节点重排、内存泄漏、事件断裂、XSS 漏洞。越早养成“少用 innerHTML、先查存在、关注执行时机”的习惯，后面踩的坑就越少。
