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

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

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

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

Ответ 1

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

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

В противном случае:

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

Ответ 2

Способ прототипа Element.update() например:

$('my_container').update()

Ответ 3

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

Ответ 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/

Ответ 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]);
    }

Или используйте .empty(), если вы используете jQuery. Это просто альтернативное решение, цикл while намного более изящный.