在 JS 中清除屏幕

在开发 Web 应用程序时，有时需要清除屏幕上的内容以便显示新的内容。在 JavaScript 中，有多种方法可以清除屏幕。

方法一：使用 innerHTML 属性清空元素内容

使用 innerHTML 属性，可以将一个 HTML 元素的内容清空。以下代码演示了如何使用 innerHTML 属性清空 body 元素的内容：

document.body.innerHTML = '';

注意： 这种方法不仅会清空元素的内容，还会删除元素本身。

方法二：使用 removeChild() 方法删除子节点

如果只想删除元素的子节点而不是元素本身，可以使用 removeChild() 方法。以下代码演示了如何使用 removeChild() 方法清空 body 元素的所有子节点：

const body = document.body;
while (body.firstChild) {
  body.removeChild(body.firstChild);
}

该代码中，我们先获取了 body 元素的引用，然后使用一个 while 循环，逐个删除 body 元素的所有子节点。

方法三：使用 outerHTML 属性删除整个元素

如果想彻底删除一个元素，可以使用 outerHTML 属性。使用该属性，可以直接将整个元素从 DOM 树中删除。以下代码演示了如何使用 outerHTML 属性删除 body 元素：

document.body.outerHTML = '';

结论

以上就是 JavaScript 中清除屏幕的三种方法。根据具体情况，可以选择使用不同的方法。如果只是想清空元素的内容，建议使用第一种方法；如果想删除元素的子节点，则使用第二种方法；如果要彻底删除一个元素，则使用第三种方法。