在JavaScript中清空一个div的内容有多种方法，以下是常用的几种实现方式及适用场景：

---

1. 直接设置innerHTML为空字符串

这是最简洁的方法，适用于快速清空所有内容（包括HTML标签和文本）。

document.getElementById('myDiv').innerHTML = '';

优点：代码量少，执行效率高。

注意：会移除所有子节点和事件监听器，仅保留元素本身。

---

2. 使用removeChild逐个移除子节点

通过循环删除所有子节点，适合需要保留元素本身或处理子节点的场景。

const div = document.getElementById('myDiv');
while (div.firstChild) {
  div.removeChild(div.firstChild);
}

优点：精细控制子节点，避免意外移除事件监听器。

缺点：代码稍显冗长。

---

3. 使用textContent或innerText

仅清空文本内容，保留HTML标签（但标签不会被渲染）。

document.getElementById('myDiv').textContent = ''; // 或 innerText

适用场景：仅需清空文本，保留空标签结构时使用。

---

4. jQuery的empty()方法

若项目中引入了jQuery，可用更简洁的语法：

$('#myDiv').empty();

优点：兼容性好，代码简洁。

---

方法对比与选择建议

方法	特点	适用场景
innerHTML = ''	最快，简单直接	常规清空，无需保留子节点
removeChild循环	保留元素，精细控制	需处理子节点或事件监听器
textContent	仅清空文本，保留空标签	纯文本清理
jQuery的empty()	语法简洁，兼容性优化	使用jQuery的项目

---

扩展场景

• 动态更新内容：清空后常配合innerHTML或appendChild插入新内容。

• 性能优化：频繁操作时，建议使用DocumentFragment批量更新以减少重绘。

根据具体需求选择合适方法即可。