title: How to append ajax html response to next to current div
body: <p>I've <code>DOM</code> as follows,</p>
  
  <pre><code>&lt;div id='level-1'&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;span&gt;&lt;a&gt;Mike&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;&lt;a&gt;John&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;&lt;a&gt;Ket&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;  
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and <code>jQuery</code> is as follows,</p>
  
  <pre><code>$(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
  });
  </code></pre>
  
  <p><code>ajax</code> response will be same as above <code>DOM</code> except <code>id</code> of the <code>div</code> and content of <code>anchor tag</code>. <code>id</code> will be <code>level-2</code> or <code>level-3</code> i,e. <code>+1</code> to current value of the div.</p>