title: JavaScript generate an HTML <ul> list with <li> content in a for loop
body: <p>I have a for-loop in javascript/jQuery to create an html unordered list. I want every multiple of 10 iteration to be a new unordered list tag.</p>
  
  <p>JavaScript code:</p>
  
  <pre><code>var count = 100;
  for(var i = 0; i &lt;= count; i++) {
      if(i == 0) {
          $('ul.list').append('&lt;li&gt;' + i + '&lt;/li&gt;');
      } else {
          if(i % 10 == 0) {
              $('ul.list').after('&lt;ul class="list"&gt;&lt;/ul&gt;');
          }
          $('ul.list:last-child').append('&lt;li&gt;' + i + '&lt;/li&gt;');
      }
  }
  </code></pre>
  
  <p>It looks like it should work, but JavaScript generates this:</p>
  
  <pre><code>&lt;ul class="list"&gt;&lt;li&gt;0&lt;/li&gt;&lt;/ul&gt;
  &lt;ul class="list"&gt;&lt;/ul&gt;
  &lt;ul class="list"&gt;&lt;/ul&gt;
  &lt;ul class="list"&gt;&lt;/ul&gt;
  &lt;ul class="list"&gt;&lt;/ul&gt;
  &lt;ul class="list"&gt;&lt;/ul&gt;
  &lt;ul class="list"&gt;&lt;/ul&gt;
  &lt;ul class="list"&gt;&lt;/ul&gt;
  &lt;ul class="list"&gt;&lt;/ul&gt;
  &lt;ul class="list"&gt;&lt;/ul&gt;
  &lt;ul class="list"&gt;&lt;/ul&gt;
  &lt;ul class="list"&gt;&lt;/ul&gt;
  &lt;ul class="list"&gt;&lt;/ul&gt;
  &lt;ul class="list"&gt;&lt;/ul&gt;
  &lt;ul class="list"&gt;&lt;/ul&gt;
  ...
  </code></pre>
  
  <p>I expect it to output 10 <code>&lt;li&gt;</code> items and then create a new unordered list tag every 10th item.  Clearly the code is all wrong.  Can I get some help.</p>