Cách xóa nội dung của một div

Question

Có ai đó biết cách làm trống nội dung của div (không phá hủy nội dung) trong JavaScript không?

Cảm ơn,

Bruno

Answer 1

Nếu div của bạn trông như thế này:

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

Sau đó Javascript này:

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

sẽ làm cho nó trông giống như thi s:

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

Answer 2

Nếu bạn đang sử dụng jQuery ...

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

hoặc

$('div').empty(); 

Answer 3

Trong jQuery nó sẽ là đơn giản như $('#yourDivID').empty()

Xem documentation.

Answer 4

Nếu bằng cách nói mà không phá hủy nó, bạn có nghĩa là một giữ một tham chiếu đến trẻ em, bạn có thể làm:

var oldChildren = []; 

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

---

Về gắn thẻ gốc (html css) của câu hỏi của bạn:

Bạn không thể xóa nội dung bằng CSS. Bạn chỉ có thể che giấu nó. Ví dụ. bạn có thể ẩn tất cả trẻ em của một nút nhất định với:

#someID > * { 
    display: none; 
} 

Điều này không hoạt động trong IE6 mặc dù (nhưng bạn có thể sử dụng #someID *).

Answer 5

Một cách khác để làm điều đó là:

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

Tuy nhiên, sử dụng document.getElementById('myDiv').innerHtml = ""; là nhanh hơn.

Xem: Benchmark test

N.B.

Cả hai phương pháp đều bảo toàn div.