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

You can use .empty() first, then use .append() in one line :)

like this:

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

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

in case you need to clear the dialog first use .empty() which is faster than .html("")

see Jquery Difference .html("") vs .empty()

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