Updating HTML after Ajax or jQuery call

Question

I've created two calls, one is ajax call to my controller, and other one is jquery call. I've did both just to check if my HTML would update once I trigger the event... But none of these methods update my HTML (it stays the same way). Here are the methods:

Method #1:

$("#btnSearch").click(function(){
       var startDate =  $.trim($("#startDate").val());
       var endDate =  $.trim($("#endDate").val());
       $.post("/history/list",{'startDate':startDate,"endDate":endDate},function(data){
           var result = $('<div />').append(data).find('#historyList').html();
           $('#historyList').append(result);
           console.log(result);
// the result is displayed correctly in the console...
       });
    });
// This is supposed to update my HTML in the browser now, but it's not showing anything new...

Method #2:

$('#btnSearch').click(function () {
    console.clear();
    $.ajax({
        url: "/history/list",
        data: {
            startDate: $('#startDate').val(),
            endDate: $('#endDate').val(),
        },
        type: "GET",
        dataType: "html",
        success: function (data) {
            var result = $('<div />').append(data).find('#historyList').html();
            $('#historyList').append(result);
            console.log(result);
// the result is displayed correctly in the  console...
        },
        error: function (xhr, status) {
            alert("Sorry, there was a problem!");
        },
        complete: function (xhr, status) {
            //$('#showresults').slideDown('slow')
        }
    });
});

None of these methods update my HTML once the call is finished and data is returned... The data object holds the HTML as the result, and I'd like that HTML in the data object replaces everything what is in div tag under id #historyList .. What am I doing wrong here?

PS I'm using chrome browser (if this is a useful information)

Answer 1

I don't get the result. Could you use .html, like so:

$('#historyList').html(data);

Or the whole code like this.

$('#btnSearch').click(function () {
            console.clear();
            $.ajax({
                url: "/history/list",
                data: {
                    startDate: $('#startDate').val(),
                    endDate: $('#endDate').val(),
                },
                type: "GET",
                dataType: "html",
                success: function (data) {
                    $('#historyList').html(data);
                    console.log(result);
// the result is displayed correctly in the  console...
                },
                error: function (xhr, status) {
                    alert("Sorry, there was a problem!");
                },
                complete: function (xhr, status) {
                    //$('#showresults').slideDown('slow')
                }
            });
        });

Answer 2

Make sure $('#historyList') is not an empty array and exists in the DOM. If it exists,

$('#historyList').html(data);

should solve the problem.

Correct me, if my understanding of the question is wrong.