最直接有效的方法是将容器节点的 innerHTML 设为空字符串；while + removeChild 更彻底，适合精细控制或兼容旧环境；replaceChildren() 是现代推荐方法，语义清晰、性能好但兼容性有限；textContent = "" 仅清空文本，不删除子元素。
最直接有效的方法是把容器节点的 innerHTML 设为空字符串。
用 innerHTML = "" 清空（最常用）
适用于大多数场景，写法简洁，浏览器兼容性好，性能也不错：
-
注意：会销毁所有子节点及其绑定的事件监听器、关联的数据（如通过
dataset或 JS 对象缓存的内容） - 如果子节点里有正在运行的定时器、WebSocket 连接等，需提前手动清理，否则可能造成内存泄漏
- 示例：
document.getElementById('container').innerHTML = '';
用 while + removeChild 清空（更彻底）
逐个移除子节点，适合需要精细控制或兼容极老环境（如 IE8 及以下）：
- 能确保每个子节点被真正从 DOM 树中移除，触发
beforeunload或自定义的移除逻辑（如有 MutationObserver 监听） - 写法：
const el = document.getElementById('container'); while (el.firstChild) el.removeChild(el.firstChild); - 比 innerHTML 略慢，但语义更明确，不依赖字符串解析
用 replaceChildren()（现代推荐）
ES2021 新增方法，语义清晰、性能良好，且支持传入新内容（清空即不传参）：
- 写法：
document.getElementById('container').replaceChildren(); - 优势：不会触发重排（reflow）多次，比循环 removeChild 更高效；自动处理文本节点、注释节点等
- 注意：IE 完全不支持，Safari 16.4+、Chrome 109+、Firefox 104+ 开始支持，需按项目兼容要求取舍
避免用 textContent = ""
textContent = "" 只清空文本内容，**不会删除子元素节点**，容易误用：
- 比如
<div> <p>hello</p>world</div>执行后变成<div><p>hello</p></div>——<p></p>还在 - 仅当确认容器内只有纯文本时才适用
