Question

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

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

这样做的有效替代方法是清除div的内容吗？

Answer 1

如果你有jQuery那么：

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

否则：

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

Answer 2

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

$('my_container').update()

Answer 3

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

Answer 4

您可以重新定义.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/

Answer 5

您可以遍历其子项并删除，即

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循环更优雅。

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

5 个答案: