javascript - insertar - ¿Cómo borro el contenido de un div sin innerHTML="";

innerhtml que es

Question

Tengo un div que se llena con elementos DOM creados por JS,

Quiero que el div se elimine cuando se repita la función JS; sin embargo, he oído eso usando document.getElementById(''elName'').innerHTML = ""; no es una buena idea,

¿Cuál es una alternativa válida para hacer esto para borrar los contenidos del div?

Answer 1

El modo Prototipo es Element.update() por ejemplo:

$(''my_container'').update()

Answer 2

Podría recorrer sus hijos y eliminarlos, es decir.

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

O use .empty() si está usando jQuery. Esta es solo una solución alternativa, un ciclo while es mucho más elegante.

Answer 3

Puede redefinir .innerHTML. En Firefox y Chrome, no es un problema borrar los elementos con .innerHTML = "". En IE, lo es, porque cualquier elemento secundario se borra inmediatamente. En este ejemplo, "mydiv.innerHTML" normalmente devolvería "indefinido". (sin redefinir, es decir, y en IE 11 a partir de la fecha de esta creación posterior)

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/

Answer 4

Si está utilizando jQuery eche un vistazo al método .empty() http://api.jquery.com/empty/

Answer 5

Si tienes jQuery, entonces:

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

De otra manera:

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