28

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

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

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

4

5 回答 5

53

如果你有 jQuery，那么：

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

除此以外：

var node = document.getElementById('elName');
while (node.hasChildNodes()) {
    node.removeChild(node.firstChild);
}
于 2011-02-20T14:57:48.003 回答
4

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

$('my_container').update()
于 2011-03-11T23:36:41.460 回答
2

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

于 2011-02-20T14:58:06.193 回答
0

你可以遍历它的孩子然后删除，即。

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]);
    }

或者.empty()，如果您使用的是 jQuery，请使用。这只是一种替代解决方案，while循环更加优雅。

于 2011-02-20T15:00:45.007 回答
0

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

于 2014-01-21T07:26:21.433 回答