title: javascript to iterate image folders and add images to an unordered list
body: <p>I am trying to figure out exactly why this script wont work. I first thought it might be because of the div and the following ul, but it still wont work after assigning an additional ID to the ul. Really need to figure this out tonight, so all help is highly appreciated.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="Home-Image"&gt;   
  
      &lt;h1&gt;Images&lt;/h1&gt;
      &lt;ul id="Home-Images"&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;img src="" width=100 height=100/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;img src="" width=100 height=100/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;img src="" width=100 height=100/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;img src="" width=100 height=100/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;button id="toggle-two"&gt;View more Images&lt;/button&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(document).ready(function() {
  var files = {'jpg':4};
  var pageName = "d";
  for (var ext in files){
  for (var i = 0; i &lt; files[ext]; i++){
  var src = "../Images/D/allimages" + pageName + "-" + (i+1) + "." + ext;}
  var img = new Image(); 
  img.src = src;
  var container = document.getElementById('Home-Images');
  container.appendChild(img);
  }});    
  </code></pre>