如何清空一个div的内容而不使用innerHTML = "";

Question

我有一个由JS创建的DOM元素填充的

，

我希望在JS函数重复时清除该

，

然而，我听说使用document.getElementById('elName').innerHTML = "";不是一个好主意，

有什么有效的替代方法可以清除该

的内容吗？

- Myles Gray

---

你从哪里听到的？有链接吗？ - Oded

通过字符串进行DOM操作不是一个好主意，对吧？ - Myles Gray

@Myles：让浏览器重新解析字符串可能比直接传递DOM树慢（这就是为什么人们建议不要随意复制粘贴字符串），但出于明显的原因，这里并不适用。 - Ulrich Schwarz

尽管 '' 是一个字符串，但它是一种非常轻量级的“使用字符串操作 DOM”的方式。它高效、定义明确，并且对于编程人员来说很直观。我敢说这比在循环中删除子元素要快得多。 - tenfour

实际上这可能是一个问题，因为IE将某些元素的innerHTML视为只读属性，并可能抛出一个令人讨厌的“未知运行时错误”。所以你最好小心使用。另请参见此答案。 - Mohoch

Answer 1

如果你有jQuery的话，则可以：

$('#elName').empty();

否则：

var node = document.getElementById('elName');
while (node.hasChildNodes()) {
    node.removeChild(node.firstChild);
}

- Alnitak

Answer 2

原型方式是Element.update()，例如：

$('my_container').update()

- Antonio Bardazzi

Answer 3

如果您正在使用jQuery，请查看 .empty() 方法http://api.jquery.com/empty/。

- Rob Stevenson-Leggett

Answer 4

你可以循环遍历它的子元素并将其删除，例如：

var parDiv = document.getElementById('elName'),
    parChildren = parDiv.children, tmpChildren = [], i, e;

    for (i = 0, e = parChildren.length; i < e; i++) {
        tmpArr.push(parChildren[i]);
    }

    for (i = 0; i < e; i++) {
        parDiv.removeChild(tmpChildren[i]);
    }

如果您正在使用jQuery，可以使用.empty()。

这只是一种替代方案，while循环更加优雅。

- Tom

---

我不确定，但感觉那样行不通。删除节点后，索引不是会更新吗？ - UltraInstinct

确实。使用 i-- 循环从 length 到 0。 - Quentin

我不记得了，但我认为你可能是对的。无论如何，我都会使用Alnitak的while循环，因为它看起来更清晰。 - Tom

Answer 5

您可以重新定义.innerHTML。在Firefox和Chrome中，使用.innerHTML = ""清除元素不是问题。但在IE中，这样做会立即清除任何子元素。在此示例中，“mydiv.innerHTML”通常会返回“undefined”。（没有重新定义的情况下，在本文创建时的IE 11中）

if (/(msie|trident)/i.test(navigator.userAgent)) {
 var innerhtml_get = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").get
 var innerhtml_set = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").set
 Object.defineProperty(HTMLElement.prototype, "innerHTML", {
  get: function () {return innerhtml_get.call (this)},
  set: function(new_html) {
   var childNodes = this.childNodes
   for (var curlen = childNodes.length, i = curlen; i > 0; i--) {
    this.removeChild (childNodes[0])
   }
   innerhtml_set.call (this, new_html)
  }
 })
}

var mydiv = document.createElement ('div')
mydiv.innerHTML = "test"
document.body.appendChild (mydiv)

document.body.innerHTML = ""
console.log (mydiv.innerHTML)

http://jsfiddle.net/DLLbc/9/

- Agamemnus

Answer 6

2022年答案：

使用element.replaceChildren()

清空节点 replaceChildren()提供了一种非常方便的机制来清空一个节点的所有子节点。您可以在父节点上调用它，而不指定任何参数：

文档

- Hammerhead

---

虽然这段代码可能解决了问题，但是包括解释它如何以及为什么解决了问题将有助于提高您的帖子质量，并可能导致更多的赞。请记住，您正在回答未来读者的问题，而不仅仅是现在提问的人。请编辑您的答案以添加解释并指出适用的限制和假设。 - jasie