title: how do I create a function and image tag repeat over and over with javascript?
body: <p>I'm trying to set up a portfolio for a photography website and when I get photos I add multiple at a time, is there a way to use javascript to automate the process of creating a tag as many time as I need with the link counting up.</p>
  
  <p>I've tried to look in other places and nothing really showed up.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container" id="Gallery"&gt;
          &lt;figure class="gallery__item gallery__item--1"&gt;&lt;img src="./img/image1.jpg" alt="image1" class="gallery__img"&gt;&lt;/figure&gt;
          &lt;figure class="gallery__item gallery__item--2"&gt;&lt;img src="./img/image2.jpg" alt="image2" class="gallery__img"&gt;&lt;/figure&gt;
          &lt;figure class="gallery__item gallery__item--3"&gt;&lt;img src="./img/image3.jpg" alt="image3" class="gallery__img"&gt;&lt;/figure&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>function addElement() {
              var figure = document.createElement("figure");
              document.getElementById('Gallery').appendChild(figure);
              figure.className += 'gallery__item';
  
              var photo = document.createElement("img");
              document.getElementById('gallery__item').appendChild(photo);
              photo.className += 'gallery__img';
          }
  </code></pre>
  
  <p>I would like to get javascript to recreate these lines of code to a set amount of times, say if there is 10 files in a folder the code would recreate this line ten times. As well as the src of the image counts up for example "image1.jpg, image2.jpg, image3.jpg, ...."</p>