如何清空div的内容答案

【问题标题】：How to empty the content of a div如何清空div的内容
【发布时间】：2011-04-21 12:40:18
【问题描述】：

有人知道如何在 JavaScript 中清空 div 的内容（而不破坏它）吗？

谢谢，

布鲁诺

【问题讨论】：

通过 jscript？只是让它不可见？你到底想要什么？
感谢大家的回答！
另请参阅已关闭的旧问题：How to clear the content of a div using javascript?

标签： javascript html

【解决方案1】：

如果你的 div 看起来像这样：

<div id="MyDiv">content in here</div>

然后这个Javascript：

document.getElementById("MyDiv").innerHTML = "";

会让它看起来像这样：

<div id="MyDiv"></div>

【讨论】：

效果很好。这从 div 中删除了 JS（在我的例子中是 OpenLayers 地图），而 $('#example').empty();没有删除 JS。
这会破坏它。

【解决方案2】：

如果你使用 jQuery ...

$('div').html('');

或

$('div').empty();

【讨论】：

他用javascript而不是jquery问。

【解决方案3】：

另一种方法是：

var div = document.getElementById('myDiv');
while(div.firstChild)
    div.removeChild(div.firstChild);

但是，使用document.getElementById('myDiv').innerHTML = ""; 更快。

见：Benchmark test

注意

这两种方法都保留了 div。

【讨论】：

我误读了那个测试吗？对于所有浏览器，第一种方式具有更高的 ops/sec，这意味着它更快。第二种方式更慢，更复杂。
不，你是对的。我误读了。我把每秒的操作数误认为是总时间。我会更新我的答案。

【解决方案4】：

如果说而不破坏它，你的意思是保留对孩子的引用，你可以这样做：

var oldChildren = [];

while(element.hasChildNodes()) {
    oldChildren.push(element.removeChild(element.firstChild));
}

关于您问题的原始标记（html css）：

您不能使用 CSS 删除内容。你只能隐藏它。例如。您可以使用以下方法隐藏某个节点的所有子节点：

#someID > * {
    display: none;
}

这在 IE6 中不起作用（但您可以使用 #someID *）。

【讨论】：

【解决方案5】：

在 jQuery 中它就像 $('#yourDivID').empty() 一样简单

请参阅documentation。

【讨论】：

原来的问题没有提到jquery。请停止假设基本的 javascript 操作需要某种外部库来完成每个简单的任务。
@mopsyd 哦，男孩，在回答 5 年后有必要这样做吗？ :) jQuery 在 2011 年是一种标准，供您参考，它仍然被广泛使用。 jQuery 是 javascript 顺便说一句。如果你不知道...
document.querySelector("#myDiv").InnerHTML = "";也是如此
你不需要所有 jQuery 的开销来做到这一点。此外，建议更好的做法不会过期。
@mopsyd 那是你的意见。该库（jQuery）使非常复杂的任务变得更加简单。非常大的网站使用它。所以放松。如果您想以艰难的方式做事，也取决于您。没人在乎。

【解决方案6】：

这个方法最适合我：

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

要使用它，我们可以这样部署：

document.getElementsByID('DIV_Id').remove();

或

document.getElementsByClassName('DIV_Class').remove();

【讨论】：

【解决方案7】：

你可以.remove()每个孩子：

const div = document.querySelector('div.my-div')
while(div.firstChild) div.firstChild.remove()

【讨论】：

【解决方案8】：

您可以使用以下方法清空 DOM：

const el = document.getElementById("MyDiv");
while (el.firstChild) {
  el.removeChild(el.firstChild);
}

这应该比传统使用的方法更快：document.getElementById("MyDiv").innerHTML = "";

【讨论】：