JS从HTML中删除所有子元素

有时候我们需要从HTML中删除所有子元素，这可以通过JavaScript来实现。以下是一些方法来实现这个任务。

方法1：使用innerHTML属性

可以使用innerHTML属性将包装元素中的子元素设置为空字符串来删除子元素。

const wrapper = document.querySelector('.wrapper');
wrapper.innerHTML = '';

此方法会将包装元素的innerHTML整体替换为一个空字符串。但是，它可能会破坏绑定到子节点的事件监听器和事件委托。

方法2：使用removeChild()方法

通过递归调用removeChild()方法，我们可以删除包装元素的所有子元素。

const wrapper = document.querySelector('.wrapper');

while(wrapper.firstChild) {
  wrapper.removeChild(wrapper.firstChild);
}

此方法将逐个删除子元素而不会破坏事件监听器和委托。

方法3：使用innerHTML和outerHTML

使用outerHTML并与innerHTML结合使用，可以快速删除节点及其所有descendants。

const wrapper = document.querySelector('.wrapper');
wrapper.outerHTML=wrapper.outerHTML;

此方法将直接使用替换整个包装元素来删除整个包装元素以及它的所有子元素。

总结

我们学习了三种不同的方法来删除HTML元素中的所有子元素。尽管不同方法之间有所不同，但它们都能完成任务并返回同样的结果。需要根据自己的需求选择合适的方法来实现删除所有子元素的操作。