Cómo vaciar el contenido de un div

Question

¿Alguien sabe cómo vaciar el contenido de un div (sin destruirlo) en JavaScript?

Gracias,

Bruno

Answer 1

Si el div se ve así:

<div id="MyDiv">content in here</div>

Entonces este Javascript:

document.getElementById("MyDiv").innerHTML = "";

hará que se vea como Thi s:

<div id="MyDiv"></div>

Answer 2

Si estás usando jQuery ...

$('div').html(''); 

o

$('div').empty(); 

Answer 3

En jQuery sería tan simple como $('#yourDivID').empty()

Ver el documentation.

Answer 4

Si diciendo sin destruirlo, que quiere decir a una mantener una referencia a los niños, que puede hacer:

var oldChildren = []; 

while(element.hasChildNodes()) { 
    oldChildren.push(element.removeChild(element.firstChild)); 
} 

---

En cuanto al etiquetado originales (html css) de su pregunta:

No puede eliminar contenido con CSS. Solo puedes esconderlo. P.ej. puede ocultar todos los niños de un determinado nodo con:

#someID > * { 
    display: none; 
} 

Esto no funciona en IE6 aunque (pero se puede usar #someID *).

Answer 5

Una forma alternativa de hacerlo es:

var div = document.getElementById('myDiv'); 
while(div.firstChild) 
    div.removeChild(div.firstChild); 

Sin embargo, utilizando document.getElementById('myDiv').innerHtml = ""; es más rápido.

Ver: Benchmark test

N. B.

Ambos métodos preservan la div.