如何用body内部div内容替换body内容，避免误删目标div？

方法一：先留存目标内容，再清空替换 #

思路很直接：先把要保留的内容从目标div里存下来，再清空body的所有内容，最后把留存的内容插入body里，这样就不会出现提前清空body导致目标内容丢失的问题。

// 获取目标div
const targetDiv = document.getElementById('remove');
// 深拷贝div里的所有子节点，避免后续操作影响原节点
const preservedContent = targetDiv.cloneNode(true).childNodes;

// 循环清空body的所有子元素
while (document.body.firstChild) {
  document.body.removeChild(document.body.firstChild);
}

// 把留存的内容逐个添加到body里
preservedContent.forEach(node => {
  document.body.appendChild(node);
});

方法二：直接移动节点（更高效） #

如果需要保留节点的原有状态（比如绑定的事件监听），可以直接把目标div里的子节点移动到body下，最后删掉空的目标div就行，这种方法不用复制节点，性能更优：

const targetDiv = document.getElementById('remove');

// 把div里的子节点逐个移到body（移动操作会自动从原位置移除节点）
while (targetDiv.firstChild) {
  document.body.appendChild(targetDiv.firstChild);
}

// 删除已经空了的目标div
document.body.removeChild(targetDiv);

方法三：innerHTML快速替换（适合静态内容） #

如果只是处理纯静态HTML内容，不需要保留节点的事件或状态，可以用innerHTML一步搞定，代码最简洁：

const targetDiv = document.getElementById('remove');
// 直接把body的内容替换成目标div里的内容
document.body.innerHTML = targetDiv.innerHTML;

内容的提问来源于stack exchange，提问作者Filou