title: Append to div without replacing the content, just adding to the end
body: <p>I have the following div:</p>
  
  <pre><code>&lt;div id="flip" class="container"&gt;
      &lt;div class="f-page f-cover"&gt;
          &lt;div class="cover-elements"&gt;
              &lt;div class="f-cover-story"&gt;
                  &lt;span&gt;Life Events&lt;/span&gt;
                  Photo Album
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="f-cover-flip"&gt;
              &amp;lt; swipe
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And i am trying to add to this div like this:</p>
  
  <pre><code>for(var i = events.length; i &gt; 0 ; i -= 5 ){
                      result_html += "&lt;div class='f-page'&gt;";
                          result_html += "&lt;div class='f-title'&gt;";
                              result_html += "&lt;a href='index.jsp'&gt;Back to bookshelf&lt;/a&gt;";
                              result_html += "&lt;h2 id='event_name'&gt;Your Life Events&lt;/h2&gt;";
                              result_html += "&lt;a href='#'&gt;&lt;/a&gt;";
                          result_html += "&lt;/div&gt;";
  
                          if(index &lt; events.length){
                              result_html += "&lt;div class='box w-25 h-70' id='top_left_box'&gt;&lt;div class='img-cont img-1'&gt;&lt;/div&gt;&lt;h3&gt;"
                                          + events[index].name + "&lt;span&gt;Published " + "From: " + events[index].start_date + "to: " + events[index].end_date + "&lt;/span&gt;&lt;/h3&gt;&lt;p&gt;"
                                          + events[index].description + " With: " + events[index].participants[0].name + "&lt;img src="+events[index].participants[0].pictureUrl + " /&gt;&lt;/p&gt;&lt;/div&gt;";
  
                              index++;
                          }
                          if(index &lt; events.length){
  
                              result_html += "&lt;div class='box w-50 h-70 box-b-l box-b-r' id='top_center_box'&gt;&lt;div class='img-cont img-2'&gt;&lt;/div&gt;&lt;h3&gt;"
                                          + events[index].name + "&lt;span&gt;Published " + "From: " + events[index].start_date + "to: " + events[index].end_date + "&lt;/span&gt;&lt;/h3&gt;&lt;p&gt;"
                                          + events[index].description + " With: " + events[index].participants[0].name + "&lt;img src="+events[index].participants[0].pictureUrl + " /&gt; &lt;/p&gt;&lt;/div&gt;";
                              index++;
                          }   
                          if(index &lt; events.length){
  
                              result_html += "&lt;div class='box w-25 h-70' id='top_right_box'&gt;&lt;div class='img-cont img-3'&gt;&lt;/div&gt;&lt;h3&gt;"
                                          + events[index].name + "&lt;span&gt;Published " + "From: " + events[index].start_date + "to: " + events[index].end_date + "&lt;/span&gt;&lt;/h3&gt;&lt;p&gt;"
                                          + events[index].description + " With: " + events[index].participants[0].name + "&lt;img src="+events[index].participants[0].pictureUrl + " /&gt;&lt;/p&gt;&lt;/div&gt;";
  
                              index++;
                          }
                          if(index &lt; events.length){
                              result_html += "&lt;div class='box w-50 h-30 box-b-r title-top' id='bottom_left_box'&gt;&lt;h3&gt;"
                                          + events[index].name + "&lt;span&gt;Published " + "From: " + events[index].start_date + "to: " + events[index].end_date + "&lt;/span&gt;&lt;/h3&gt;&lt;p&gt;"
                                          + events[index].description + " With: " + events[index].participants[0].name + "&lt;img src="+events[index].participants[0].pictureUrl + " /&gt;&lt;/p&gt;&lt;/div&gt;";
                              index++;
                          }
                          if(index &lt; events.length){
                              result_html += "&lt;div class='box w-50 h-30 title-top' id='bottom_right_box'&gt;&lt;h3&gt;" 
                                          + events[index].name + "&lt;span&gt;Published " + "From: " + events[index].start_date + "to: " + events[index].end_date + "&lt;/span&gt;&lt;/h3&gt;&lt;p&gt;"
                                          + events[index].description + " With: " + events[index].participants[0].name + "&lt;img src="+events[index].participants[0].pictureUrl + " /&gt;&lt;/p&gt;&lt;/div&gt;";
                              alert("&lt;img src="+events[index].participants[0].pictureUrl + " /&gt;");
                              index++;
                          }
                      result_html += '&lt;/div&gt;';
  
                  }
  
                  result_html += "&lt;div class='f-page f-cover-back'&gt;&lt;div id='codrops-ad-wrapper'&gt;&lt;a href='index.jsp' &gt;Back to bookshelf&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;";
  
                  $(".container").append(result_html);
  
                  alert($(".container").html());
  
              });
  </code></pre>
  
  <p>What is happening is that it appends but the div that was there </p>
  
  <pre><code>&lt;div class="f-page f-cover"&gt;
              &lt;div class="cover-elements"&gt;
                  &lt;div class="f-cover-story"&gt;
                      &lt;span&gt;Life Events&lt;/span&gt;
                      Photo Album
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="f-cover-flip"&gt;
                  &amp;lt; swipe
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>appears has blank when i make the <code>alert($(".container").html());</code></p>
  
  <p>from what i saw in the jquery append function this should work but it seems as if it is replancing or deleting the content of the flip div. why?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>This is happening because i am doing the alert inside a ajaxStop jquery.</p>
  
  <p>If i do this inside document.ready it returns the content. Why is this happening?</p>