Как очистить содержимое div без innerHTML = "";

У меня есть div, который заполняется созданными JS элементами DOM,

Я хочу, чтобы div был очищен при повторении функции JS, однако я слышал, что использование document.getElementById('elName').innerHTML = ""; не очень хорошая идея,

какова действительная альтернатива этому, чтобы очистить содержимое div?

26
dom dom-manipulation html javascript

5 ответов

Если у вас есть jQuery, то:

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

иначе:

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

путь прототипа Element.update() например:

$('my_container').update()
4

Если вы используете jQuery, посмотрите на .empty() метод http://api.jquery.com/empty/

2

вы можете изменить .свойство 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/

1

вы можете петлю через своих детей и удалить, то есть.

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 петля гораздо более элегантна.

0