title: insertAfter with Load , div element disappear
body: <p>I have a main div on two pages ie <code>page1.php</code> and <code>form.php</code></p>
  
  <h2>page1.php</h2>
  
  <pre><code>&lt;div class="main_div"&gt;
      &lt;?php require('form.php'); ?&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      $(".add_one").click(function(){
          $(".main_div").insertAfter(".single_div").load('form.php');
      });
  &lt;/script&gt;
  </code></pre>
  
  <h2>form.php</h2>
  
  <pre><code>&lt;div class="single_div"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="text" class="text1" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="button" class="add_one" value="Add" /&gt;&lt;/td&gt;
              &lt;td&gt;Some other fields too&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>css.css</h2>
  
  <pre><code>.single_div {
      background-color: green;
      float: left;
      margin-left: 10px;
  }
  </code></pre>
  
  <p>Now when i click on <code>Add</code> button, its not adding other <code>form</code> / <code>div class='single_class'</code> next to it... but it disappers</p>
  
  <p>And when i check with <code>inspect element</code> of <code>Chrome Developer Tool</code>, theres nothing.. whole body is empty except javascript</p>
  
  <p>Now how can i add page <code>load</code> option on click of button, next to it.</p>
  
  <h2>Edited / Added</h2>
  
  <p><a href="http://jsfiddle.net/marafee1243/ErN5E/" rel="nofollow">http://jsfiddle.net/marafee1243/ErN5E/</a></p>
  
  <p>the above fiddle may not be apporiate...</p>