最直接有效的方法是将容器的 innerHTML 设为空字符串，但会销毁所有子节点及其事件监听器和数据；需保留事件时推荐 replaceChildren() 或循环 removeChild；textContent = '' 会破坏 HTML 结构，不推荐。
最直接有效的方法是把容器的 innerHTML 设为空字符串，但要注意它会销毁所有子节点及其绑定的事件监听器和数据。如果需要保留事件或做精细控制，推荐用循环移除或 replaceChildren()（现代浏览器）。
方法一：innerHTML = ''（最常用）
简单粗暴，兼容性好，适合大多数场景：
- 执行
container.innerHTML = ''，DOM 会立即清空所有子元素 - 注意：所有子节点被完全销毁，附着在它们上的事件监听器、自定义属性、jQuery 数据等全部丢失
- 如果容器内有通过
document.createElement创建但尚未插入的临时节点，不影响；只清已挂载的子树
方法二：while + removeChild（兼容老浏览器）
逐个移除，更“干净”，不触发重排多次（实际只重排一次），且可配合逻辑判断：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 写法：
while (container.firstChild) container.removeChild(container.firstChild); - 优势：不会清除节点上的 JS 属性（如
el.myData = {...}），但事件监听器仍需手动解绑（因为节点被移除了） - 比 innerHTML 更可控，适合需要在清空前对每个子元素做处理的场景
方法三：replaceChildren()（推荐用于现代项目）
ES2021 新增的标准 API，语义清晰、性能好、支持传入空参或新节点：
立即学习“Java免费学习笔记（深入）”；
-
container.replaceChildren();—— 直接清空 -
container.replaceChildren(newEl1, newEl2);—— 清空并插入新内容，一步到位 - 兼容性：Chrome 86+、Firefox 76+、Safari 14.1+，Edge 86+；旧版需 polyfill 或降级
不推荐：textContent = ''
虽然也能让内容消失，但它把整个子树转成纯文本再清空，会破坏 HTML 结构，且无法恢复原始元素节点——这不是“清空子元素”，而是“替换成空文本节点”，慎用。
小提示：如果容器里有通过appendChild 动态添加的 canvas、video 等媒体元素，用 innerHTML 清空会导致资源释放（如视频暂停、canvas 重置），这是预期行为；若需保持状态，应先保存关键数据再清理。 
