title: Delay each iteration of loop by a certain time
body: <p><strong>JSFiddle:</strong> <a href="http://jsfiddle.net/KH8Gf/27/" rel="noreferrer">http://jsfiddle.net/KH8Gf/27/</a></p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>$(document).ready(function()
  {
   $('#expand').click(function()
      {
          var qty= $('#qty').val();
  
          for (var counter = 0; counter &lt; qty; counter++)
          {
              $('#child').html($('#child').html() + '&lt;br/&gt;new text');            
          }
      });
  });
  </code></pre>
  
  <p>How can I delay each iteration of the loop by a certain time?</p>
  
  <p>I tried the following unsuccessfully:</p>
  
  <pre><code>setTimeout(function(){
  $('#child').html($('#child').html() + '&lt;br/&gt;new text'); 
  },500);
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$('#child').delay(500).html($('#child').html() + '&lt;br/&gt;new text'); 
  </code></pre>