清空父盒子innerhtml后原dom引用失效，需重新创建或查询元素；重新获取后须手动绑定事件监听器，或改用事件委托。
清空父盒子的 innerHTML 后，原来通过 getElementById 获取的子元素引用就失效了——因为那些 DOM 节点已被移除，内存中不再存在。所以不能“重新绑定”，而是需要在清空后**重新创建或重新查询**子元素。
清空后必须重新获取元素
一旦执行类似 parent.innerHTML = '' 或 parent.innerHTML = '<div id="child">...</div>'，原 DOM 树被完全替换，所有旧的节点对象（包括之前用 getElementById('child') 拿到的）都会脱离文档，变成“游离节点”。再调用 getElementById 是可以的，但前提是新插入的 HTML 中**确实包含对应 id 的元素**，且该元素已挂载到文档中。
- ✅ 正确做法：先设置 innerHTML，再调用
getElementById - ❌ 错误理解：以为“绑定”是一次性操作，清空后还能复用旧引用
确保 id 唯一且已渲染
getElementById 只在当前 document（或指定根节点）中查找。如果新内容是动态插入的，要确认：
- 新 HTML 字符串里真有
id="xxx"，拼写和大小写完全一致 - 插入操作已完成（比如赋值给
innerHTML后立即查，不用等异步） - 没有多个相同 id（HTML 规范要求 id 全局唯一，重复时
getElementById通常只返回第一个）
推荐更稳妥的操作顺序
避免依赖多次查询，可边插入边持有引用：
- 用
document.createElement创建元素，设好 id，再appendChild到父容器 —— 这样你天然持有新节点引用，无需再查 - 若必须用 innerHTML 插入，建议插入后立刻用
getElementById获取，或用parent.querySelector('#xxx')（作用域限定在 parent 内，更安全） - 示例：
parent.innerHTML = '<div id="myBtn">点击</div>';<br> const btn = document.getElementById('myBtn'); // ✅ 现在能拿到
注意事件监听器不会自动恢复
即使你成功重新获取了元素，它也不会自带之前的事件监听器。每次重建后，需手动重新绑定：
- 不要写：
btn.addEventListener('click', handler)只执行一次然后指望它永久生效 - 要在每次创建/获取新节点后，显式调用
addEventListener - 或者改用事件委托（如给 parent 绑定 click，用
e.target.id === 'myBtn'判断），避免反复绑定
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
