title: How to display images from a JavaScript array/object? Starting with the first Image then onclick to the next
body: <p>Attempting to load images from my JavaScript array and display the first one the array. I then need to add a function that will allow the next image in the array to be displayed and so on till the end of the array.</p>
  
  <pre><code>&lt;script&gt;
  var images = [ '/images/1.png', '/images/2.png' ];
  
  function buildImages() {
      for (var i = 0; i &lt; images.length; i++) {
          document.createElement(images[i]);
      }
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div onload="buildImages();" class="contents" id="content"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Within the images array are paths to the images. They look like "<em>server/images/05-08-2014-1407249924.png</em>"</p>