Question

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

谢谢，

布鲁诺

Answer 1

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

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

然后这个Javascript：

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

将使它看起来像这样：

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

Answer 2

如果你正在使用jQuery ......

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

或

$('div').empty();

Answer 3

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

var oldChildren = [];

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

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

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

#someID > * {
    display: none;
}

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

Answer 4

另一种方法是：

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

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

请参阅：Benchmark test

<强> N.B。

两种方法都保留div。

Answer 5

在jQuery中，它就像$('#yourDivID').empty()

一样简单

请参阅documentation。

Answer 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();

Answer 7

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

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

Answer 8

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

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

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

如何清空div的内容

8 个答案: