title: How can i use a for loop in javascript to add HTML
body: <p>I'm making a little gallery in my website and it contains lots of pictures, how can I use a for loop to add the <code>li</code> in my website.</p>
  
  <p>This is my HTML right now and instead of all those <code>&lt;li&gt;</code> I would like a <code>for</code> loop.
  HTML:</p>
  
  <pre><code>&lt;div id="pictureBlock"&gt;
      &lt;div id="three-columns" class="grid-container"&gt;
          &lt;ul class="rig columns-3"&gt;
              &lt;li&gt;&lt;img src="images/1.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/2.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/3.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/4.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/5.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/6.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/7.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/8.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/9.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/10.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/11.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/12.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/13.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/14.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/15.jpg" /&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>