insertAdjacentHTML()是最稳的选择，因其只解析插入新字符串而不重绘整个子树，避免失焦、事件失效和canvas清空；需确保父元素已挂载DOM、位置参数正确、用户内容转义防XSS。
直接用 insertAdjacentHTML() 是最稳的选择，前提是确保父元素已挂载到 DOM 中；盲目用 innerHTML += 或提前调用 appendChild() 容易丢事件、报错或白屏。
为什么 insertAdjacentHTML() 比 innerHTML += 更可靠
前者只解析并插入新字符串，不重绘整个子树；后者会强制重新解析目标元素全部 HTML，导致已有 input 失焦、绑定的事件监听器失效、canvas 状态清空。
-
insertAdjacentHTML('beforeend', '等价于新条目
')appendChild()效果，但支持一次插入多节点 - 位置参数必须是字符串：
'beforebegin'、'afterbegin'、'beforeend'、'afterend'，拼错会静默失败 - 若插入含用户输入的内容，需先用
textContent转义或使用DOMPurify.sanitize()防 XSS，不能直接拼接
appendChild() 适合什么场景，怎么避免常见报错
当你需要后续操作节点（比如加 click 监听、读取 offsetHeight、设置 dataset）时，appendChild() 是唯一安全路径。
- 必须确保父容器存在：
const el = document.getElementById('list');返回null就别继续 —— 常见于脚本放在且没加defer - 不要对文本内容直接
appendChild('hello')：JS 会报TypeError: Failed to execute 'appendChild' on 'Node'，得先document.createTextNode()或用textContent - 批量插入多个节点时，先用
document.createDocumentFragment()收集，再一次性appendChild()，避免反复重排
动态插入前必须检查 DOM 是否就绪
所有依赖 document.body、document.getElementById() 的插入逻辑，如果在 DOMContentLoaded 之前执行，大概率拿到 null 并中断后续流程。
- 错误写法：
document.body.insertAdjacentHTML(...)放在全局脚本顶层（尤其里） - 正确写法：包裹在
document.addEventListener('DOMContentLoaded', () => { ... })回调中 - 更健壮的做法：插入前加保底判断，如
if (!document.body) return;，避免报错阻塞其他逻辑
真正容易被忽略的不是“怎么插”，而是“插的时候父节点是否存在”和“插完之后老节点的状态是否还受控”——这两点出问题，调试时往往表现为内容闪一下就消失、点击无效、控制台没报错但行为异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
