title: Updating divs with jQuery append/html
body: <p>I get data from an external JSON file that I loop through with jQuery each and then output to HTML.</p>
  
  <p>Since the JSON data updates quite often I also want to update the HTML in these divs every minute or so. I've been reading up on this and understand that the easiest way to accomplish this is to use html() instead of append(). This does not work for me since it only outputs the last div in my loop.</p>
  
  <p>With append it outputs all of my divs but, of course, they keep stacking when the script runs again. I've tried working around this by clearing the div I'm appending to before I do anything else, but this results in a horrible flickering. </p>
  
  <p>Is there any way to solve this?</p>
  
  <p>Here is the code with my empty() workaround.</p>
  
  <pre><code>&lt;div class="content lounge-content"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  function repeat(){
      $('.lounge-content').empty();
      $.getJSON('https://api.import.io/store/data/dde648b1-fae1-49c1-a4b8-a084e34119fd/_query?input/webpage/url=http%3A%2F%2Fcsgolounge.com%2F&amp;_user=213e76f7-c31e-4e56-bd2f-b7463aa8df8e&amp;_apikey=213e76f7c31e4e56bd2fb7463aa8df8e4d47f273f4f49901a03092c93455f74df3cb1f165c675c467e69380c0f2fcac66cbbe5db7e92a0764d915fc8ab62f46a64e1298b3514ce2c2d6fd43f211f91a7', function(data) 
      {
          $.each(data.results, function(key, val) {
              $(".lounge-content").append('&lt;a href="'+val.MATCH_LINK+'" target="_blank"&gt;&lt;div class="lounge-item"&gt;&lt;p&gt;'+val.whenm_text+'&lt;/p&gt;&lt;h3&gt;'+val.team1+'&lt;/h3&gt;&lt;span&gt;'+val.team1_percent+'&lt;/span&gt;&lt;p&gt; - &lt;/p&gt;&lt;span&gt;'+val.team2_percent+' &lt;/span&gt;&lt;h3&gt;'+val.team2+'&lt;/h3&gt;&lt;p&gt;'+val.best_of+', '+val.EVENTM_TEXT+'&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;&lt;hr&gt;');
          })
      });
  }
  
  setInterval(repeat, 5000);
  &lt;/script&gt;
  </code></pre>