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?

Answer 1

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

Answer 2

Inside the function clear the dialog first and then fill up with the content

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