清空DOM容器子节点有三种主流方法：一是innerHTML=""，简洁高效但会销毁事件监听器；二是while循环removeChild，语义清晰且符合DOM规范；三是replaceChildren()，现代推荐，无副作用但需注意浏览器兼容性。
最常用、最直接的方法是把容器的 innerHTML 设为空字符串：
方法一：使用 innerHTML = ""
适用于大多数场景，简单高效：
const container = document.getElementById('myContainer');
container.innerHTML = '';
✅ 优点：代码短，兼容性好，能彻底移除所有子节点（包括文本节点、注释节点等）
❌ 注意：会销毁所有子元素及其绑定的事件监听器、关联的 JavaScript 对象（如通过 element.dataset 设置的数据），且无法回退
方法二：用 while 循环调用 removeChild
更“干净”的 DOM 操作方式，逐个移除子节点：
const container = document.getElementById('myContainer');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
✅ 优点：符合 DOM 规范，语义清晰；适合需要精细控制或调试的场景
✅ 行为上与 innerHTML 清空效果一致（也会清除文本节点、注释等）
方法三：使用 replaceChildren()（现代推荐）
ES2020+ 新增方法，语义明确、性能好、且可选传入新内容：
立即学习“Java免费学习笔记（深入）”；
const container = document.getElementById('myContainer');
container.replaceChildren(); // 清空全部子节点
// 或者一步替换为新内容：
// container.replaceChildren(newElement, 'text', ...);
✅ 优点：原生支持、无副作用、未来兼容性强
⚠️ 兼容性注意：IE 不支持，Chrome 86+/Firefox 76+/Safari 14.1+ 支持；项目需考虑浏览器范围，必要时可加 polyfill 或降级
不推荐的做法
-
设置 textContent = ""：只清空文本内容，但会保留子元素标签结构（比如
<div><p>hello</p></div>执行后变成<div><p></p></div>） - 循环用 querySelectorAll + remove()：效率低、易漏掉动态插入的节点，还可能因 NodeList 静态性导致跳过某些节点
