应根据需求选择 innerHTML、textContent 或 insertAdjacentHTML：innerHTML 适合整块替换但有 XSS 风险；textContent 仅更新纯文本，安全高效；insertAdjacentHTML 可在指定位置插入 HTML 而不破坏现有结构。
用 innerHTML 直接替换整个元素内容
这是最常用也最容易上手的方式，适合整块 HTML 结构需要重写的情况。比如把一个 <div id="box"></div> 里塞进带标签的富文本。
注意：它会完全清空原节点子树，再解析字符串为新 DOM —— 所以原有事件监听、表单输入值、焦点状态全丢。
- 安全风险高：如果插入内容来自用户输入，
innerHTML = userContent可能执行任意 JS（XSS） - 性能不敏感时够用；频繁操作建议改用
textContent或insertAdjacentHTML - 示例：
document.getElementById('box').innerHTML = '<p>Hello <strong>World</strong></p>'
用 textContent 改纯文本，避开 XSS 和重渲染
当你只改文字、不碰标签结构时，textContent 是更安全、更快的选择。它把所有内容当纯字符串处理，不会解析 HTML 标签。
常见误用场景：想显示 "<script>alert(1)</script>" 这串字符本身，结果用 innerHTML 导致脚本执行。
立即学习“前端免费学习笔记（深入）”；
- 保留原有子节点结构（比如里面已有按钮、input），只改文字内容
- 自动转义特殊字符，天然防 XSS，无需额外过滤
- 性能优于
innerHTML，尤其在大量文本更新时 - 示例：
document.querySelector('#title').textContent = '用户管理 <测试>'→ 页面显示的就是带尖括号的原文
用 insertAdjacentHTML 在指定位置插入新 HTML
当你要在某个元素的开头、结尾、前面或后面“追加”一段 HTML，而不是全部替换，insertAdjacentHTML 就比先读再拼再写要干净得多。
它的四个位置参数：'beforebegin'、'afterbegin'、'beforeend'、'afterend' —— 名字直白，但容易记混顺序。
-
'beforeend'最常用，等价于appendChild的效果（插到子元素末尾） - 不会破坏已有子节点，也不会触发父元素重排（reflow）以外的副作用
- 仍存在 XSS 风险，传入内容需确保可信或提前转义
- 示例：
el.insertAdjacentHTML('beforeend', '<span class="tag">new</span>')
修改前先确认元素是否已加载完成
很多“改了没反应”的问题，其实是因为脚本执行时目标元素还没出现在 DOM 里 —— 尤其在 <head> 中直接写 JS，或没等 DOMContentLoaded 就查元素。
典型错误现象：document.getElementById('xxx') 返回 null，接着调 .innerHTML 就报 Cannot set property 'innerHTML' of null。
- 把脚本放在
</body>前是最简单可靠的方案 - 或者显式监听：
document.addEventListener('DOMContentLoaded', () => { /* 修改逻辑 */ }) - 动态生成的元素（如 AJAX 加载后插入），得在插入完成后操作，不能靠页面初始脚本一次搞定
实际改 HTML 内容时，真正麻烦的往往不是语法，而是搞不清该用哪个 API、什么时候用、以及改完后其他逻辑还是否正常——比如表单值丢了、事件绑不上、样式错位了。这些细节不盯住，光写对代码也没用。
