如何在没有 innerHTML = ""; 的情况下清除 div 的内容

Posted 2023-03-07

【中文标题】如何在没有 innerHTML = ""; 的情况下清除 div 的内容

【英文标题】：How do I clear the contents of a div without innerHTML = "";

【发布时间】：2011-06-30 18:36:19

【问题描述】：

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

我希望在 JS 函数重复时清除 div，但是我听说使用 document.getElementById('elName').innerhtml = ""; 不是一个好主意，

清除 div 内容的有效替代方法是什么？

【问题讨论】：

您从哪里听到的？有链接吗？

通过字符串操作 DOM 不是一个坏主意吗？

@Myles：让浏览器再次解析一个字符串可能比给它一个 DOM 树要慢（这就是为什么人们会建议不只是粘贴字符串），但这不适用于这里，因为显而易见的原因。

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

实际上这可能是个问题，因为 IE 将 innerHTML 关联为某些元素的只读属性，并且可能引发讨厌的“未知运行时错误”。所以你最好小心使用它。另见This answer

【参考方案1】：

如果你有 jQuery，那么：

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

否则：

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

【参考方案2】：

Prototype 方式为Element.update() 例如：

$('my_container').update()

【参考方案3】：

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

【参考方案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 循环更加优雅。

【讨论】：

我不确定，但只是觉得那行不通。删除节点后索引是否更新？

确实如此。使用 i-- 从长度循环到 0。

我不记得了，但我认为您可能是对的。不管怎样，我都会使用 Alnitak 的 while 循环，它看起来更干净。

【参考方案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/