In my webpage there is an iframe which shows some data. When user clicks on a button on the parent page, the content in iframe should be changed. What I did was sending a get request with specifiying the content to be changed using AJAX. Then the server sends back an html page with content requested. Here is my code,

html:

<button id="new-folder" class="control">Folder</button>


<div id="iframe-div">
    <iframe src="/tree" name="main_iframe">
    </iframe>
<div>

javascript(Jquery and AJAX):

$(document).ready(function(){

    $("#new-folder").click(function(e){
        $.get("/tree", {control: "new-folder"}, function(data){
           $("#main-iframe").location.reload();
        });
    });

});

What this does is when user click on button(#new-folder) a post request is sent specifying folder name. It is working great. Also response is getting back successfully. Now I need to do is show the response data on the iframe without reloading. Response is an html page. But the response is not showing in iframe unless realoding it.

I tried

$.get("/tree", {control: "new-button"}, function(data){
    $("#main-iframe").contents().find("html").html(data);
});

and many more similar methods. But non of them are working. Even the reload() method is not working. My main target is to update the content iframe without reloading. response is a html page. So what do I need to do. I'm using Jquery and AJAX.

Edit:

The above post which was suggested doesn't answer my question. Because I'm looking for a way to change/update the content in iframe without reloading it. But the suggested answer is about reloading iframe. I tried to reload the iframe as a temporary solution. That's not what I'm expecting. Also the tried solutions aren't working in my code.