📅  最后修改于: 2023-12-03 14:50:58.019000             🧑  作者: Mango
在开发 Web 应用程序时,有时需要清除屏幕上的内容以便显示新的内容。在 JavaScript 中,有多种方法可以清除屏幕。
使用 innerHTML
属性,可以将一个 HTML 元素的内容清空。以下代码演示了如何使用 innerHTML 属性清空 body 元素的内容:
document.body.innerHTML = '';
注意: 这种方法不仅会清空元素的内容,还会删除元素本身。
如果只想删除元素的子节点而不是元素本身,可以使用 removeChild()
方法。以下代码演示了如何使用 removeChild()
方法清空 body 元素的所有子节点:
const body = document.body;
while (body.firstChild) {
body.removeChild(body.firstChild);
}
该代码中,我们先获取了 body 元素的引用,然后使用一个 while 循环,逐个删除 body 元素的所有子节点。
如果想彻底删除一个元素,可以使用 outerHTML
属性。使用该属性,可以直接将整个元素从 DOM 树中删除。以下代码演示了如何使用 outerHTML
属性删除 body 元素:
document.body.outerHTML = '';
以上就是 JavaScript 中清除屏幕的三种方法。根据具体情况,可以选择使用不同的方法。如果只是想清空元素的内容,建议使用第一种方法;如果想删除元素的子节点,则使用第二种方法;如果要彻底删除一个元素,则使用第三种方法。