web-dev-qa-db-fra.com

Comment effacer le contenu d'un div sans innerHTML = "";

J'ai un div qui est rempli par des éléments DOM créés par JS,

Je veux que le div soit effacé lors de la répétition de la fonction JS, mais j'ai entendu dire que l'utilisation de document.getElementById('elName').innerHTML = ""; n'est pas une bonne idée,

Quelle est une alternative valable à cette opération pour effacer le contenu de la div?

javascripthtmldomdom-manipulation
26
Myles Gray

Si vous avez jQuery alors:

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

Autrement:

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

La manière Prototype est Element.update() par exemple:

$('my_container').update()
4
Antonio Bardazzi

Si vous utilisez jQuery, jetez un œil à la méthode .empty()http://api.jquery.com/empty/

2
Rob Stevenson-Leggett

Vous pouvez redéfinir .innerHTML. Dans Firefox et Chrome, ce n'est pas un problème pour effacer les éléments avec .innerHTML = "". Dans IE, c'est le cas, car tous les éléments enfants sont immédiatement effacés. Dans cet exemple, "mydiv.innerHTML" retournerait normalement "non défini". (sans la redéfinition, c'est-à-dire et en IE 11 à la date de la création de ce post)

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
Agamemnus

Vous pouvez parcourir ses enfants et les supprimer ensuite, c.-à-d.

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

Ou utilisez .empty() si vous utilisez jQuery. Ceci est juste une solution alternative, une boucle while est beaucoup plus élégante.

0
Tom