how to make jQuery .load() to append returned data inside the container instead of rewrite on it?

I am using .load() function to load html开发者_C百科 content from a controller action and put in an existing container element, The problem is that this coming data from the load method remove everything in this container and then write the new data there, What I want is to keep any content inside this container and just append the coming data.

here is my load:

$("#container").load("/Profile/Chat", { friendId: friendId });

$.get("/Profile/Chat", { friendId: friendId }, function(html){
    $("#container").append(html);
}, 'html');

load always replaces the content of the container. You can get around this by loading the content into a different hidden container, then append it to the intended container:

$("#hiddenContainer").load("/Profile/Chat", { friendId: friendId }, function() {
      $("#container").append($("#hiddenContainer").html());
});

load, get, post etc are all just wrappers around the jQuery ajax method. When in doubt, ajax always gets you what you want.

$.ajax({
    url: "/Profile/Chat",
    data: { friendId: friendId },
    success: function(data){
        $("#container").append(data);
    }
});