最安全高效的方式是用 while 循环 + firstChild + removeChild 或 replaceChildren()；前者兼容性好、真正移除节点并保留表单状态，后者语义清晰但需考虑浏览器支持；避免 innerHTML = '' 或 textContent = ''，因会丢失事件监听器、表单数据及组件生命周期钩子。

最安全高效的方式是用 while 循环 + firstChild + removeChild，或直接用现代 API replaceChildren()（兼容性需留意）。避免用 innerHTML = '' 或 textContent = ''，它们可能意外销毁事件监听器、表单状态或富文本格式。

推荐方法一：while + firstChild（兼容性最好，真正“移除”节点）

该方式逐个从 DOM 中物理移除子节点，不会触发重排抖动，且能正确清理绑定的事件监听器（前提是监听器未被闭包强引用）：

• 代码简洁可靠：while (container.firstChild) container.removeChild(container.firstChild);
• 适用于所有浏览器（包括 IE9+）
• 不依赖字符串解析，不会丢失 input 的 value、textarea 的内容、select 的选中状态等

推荐方法二：replaceChildren()（现代标准，语义清晰）

这是 DOM Level 4 新增的原生方法，一行清空并可选填新内容：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

• 清空：container.replaceChildren();
• 清空并添加新节点：container.replaceChildren(node1, node2);
• 优势：语义明确、性能好、自动处理文档片段
• 注意：Chrome 86+、Firefox 76+、Safari 14.1+ 支持；旧版需 polyfill 或降级

为什么不建议 innerHTML = ''？

innerHTML = '' 看似简单，但存在隐患：

立即学习“Java免费学习笔记（深入）”；

• 会强制销毁并重建整个子树，导致已绑定的事件监听器全部失效（除非用事件委托）
• 清空 <input> 时，其 value 属性值虽保留，但 DOM 中的 value 特性（attribute）会被重置，可能干扰某些依赖 attribute 的逻辑
• 若容器内有 Web Component 或自定义元素，生命周期钩子（如 disconnectedCallback）可能不会被调用
• 对含大量节点的容器，字符串赋值可能引发不必要的 HTML 解析开销

补充提醒：避免误用 textContent

container.textContent = '' 虽能清空可见文本，但它会把所有子节点（包括元素节点）转为纯文本再清空，等效于先序列化再清空 —— 实际上仍会移除全部子节点，但过程不可控，且无法用于只清空后代而不碰当前节点结构的场景。它适合纯文本容器，但不作为通用清空方案。

稳妥起见，老项目用 while 循环，新项目优先用 replaceChildren()，两者都比 innerHTML 更贴近“安全清空”的本意。