Jquery: How to clear an element before appending new content?

Question

This is my jquery code

 $.ajax({
   url: "PopUpProductDetails.aspx",
            cache: false
     }).done(function (html) {
     $("#dialog").append(html);
 });

The first time, it works just fine. It display the content of the PopUpProductDetails.aspx page. But, after that, If I click again, I get twice the same content, and so forth. I believe the problem is that I need to clear the dialog element first, before appending new content.

How do I do that?

question from:https://stackoverflow.com/questions/13822322/jquery-how-to-clear-an-element-before-appending-new-content

Answer 1

.append() appends html to the end of existing html string, use .html() to replace what's currently inside of #dialog.