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(htm         


        

Answer 1

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

Answer 2

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

Answer 3

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

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

Answer 4

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