博客

我们来讲解一下如何清除一个父级div内的所有div的内容。

方法一：使用.innerHTML清空内容

我们可以使用 innerHTML 属性来清空一个父级div内的所有div的内容。

let parentDiv = document.getElementById('parent-div');
parentDiv.innerHTML = ''; // 清空内容

这里先获取到父级div parentDiv，然后将其内部的HTML设置为空字符串，从而清空所有子级div的内容。

方法二：使用.appendChild递归删除子节点

我们也可以使用 .appendChild() 方法递归删除父级div内的所有子节点。

function removeAllChildNodes(parent) {
  while (parent.firstChild) {
    parent.removeChild(parent.firstChild);
  }
}

let parentDiv = document.getElementById('parent-div');
removeAllChildNodes(parentDiv); // 清空内容

这里我们定义了一个函数removeAllChildNodes，接受一个参数parent，表示父级节点。随后在函数中，我们使用 while 循环及removeChild()方法，一次循环地删除一个子节点，直到所有子节点都被删除。最终通过传入的参数 parentDiv调用这个函数，我们就可以清空这个父级div内部所有子节点的内容。

以上，就是清除一个父级div内的所有div内容的两个常见方法。希望能帮助到你。