Javascript 如何在没有innerHTML = ""的情况下清除div的内容；
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5057759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I clear the contents of a div without innerHTML = "";
提问by Myles Gray
I have a div that is filled by JS created DOM elements,
我有一个由 JS 创建的 DOM 元素填充的 div，
I want the div to be cleared upon the JS function repeating, however I have heard that using document.getElementById('elName').innerHTML = "";is not a good idea,
我希望在重复 JS 函数时清除 div，但是我听说使用document.getElementById('elName').innerHTML = "";不是一个好主意，
What is a valid alternative to doing this to clear the div's contents?
这样做以清除 div 的内容的有效替代方法是什么？
回答by Alnitak
If you have jQuery then:
如果你有 jQuery，那么：
$('#elName').empty();
Otherwise:
除此以外：
var node = document.getElementById('elName');
while (node.hasChildNodes()) {
node.removeChild(node.firstChild);
}
回答by Antonio Bardazzi
The Prototype way is Element.update()e.g.:
原型方式是Element.update()例如：
$('my_container').update()
回答by Rob Stevenson-Leggett
If you're using jQuery have a look at the .empty()method http://api.jquery.com/empty/
如果您使用 jQuery，请查看.empty()方法http://api.jquery.com/empty/
回答by Agamemnus
You can redefine .innerHTML. In Firefox and Chrome, it's not a problem to clear the elements with .innerHTML = "". In IE, it is, because any child elements are immediately cleared. In this example, "mydiv.innerHTML" would normally return "undefined". (without the redefine, that is, and in IE 11 as of the date of this post creation)
您可以重新定义 .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)
回答by Tom
You could loop through its children and remove then, ie.
你可以遍历它的孩子然后删除，即。
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]);
}
Or use .empty()if you are using jQuery.
This is just an alternative solution, a whileloop is much more elegant.
或者，.empty()如果您使用的是 jQuery，请使用。这只是一种替代解决方案，while循环要优雅得多。
