企业官网建设流程全解析

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或appendChild插入新内容。

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

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