How to append ajax html response to next to current div

Question

I've DOM as follows,

<div id='level-1'>
  <ul>
    <li><span><a>Mike</a></span></li>
    <li><span><a>John</a></span></li>
    <li><span><a>Ket</a></span></li>  
 </ul>
</div>

and jQuery is as follows,

$(document).on('click','div[id^=[level] ul li span a',function(){

//Making ajax request,no problem in getting the response
// Here I need to append response next to the current div i,e div#level-1 or div#leve-2
});

ajax response will be same as above DOM except id of the div and content of anchor tag. id will be level-2 or level-3 i,e. +1 to current value of the div.

Answer 1

Try

$(document).on('click','div[id^=level] ul li span a',function(){
    var parentDiv = $(this).closest("div[id^=level]"); 

    $.ajax(...).done(function(html) {
        parentDiv.after(html);
    });

});

Answer 2

Can you add parent div like this?

<div id="levels">
 <div id='level-1'>
  <ul>
   <li><span><a>Mike</a></span></li>
   <li><span><a>John</a></span></li>
   <li><span><a>Ket</a></span></li>  
  </ul>
 </div>
</div>

after you can do this in jquery

$("a").on("click",function(){
    // on ajax success
    $(this).parent("#levels").append("whatever you want!");

});