javascript to iterate image folders and add images to an unordered list

Question

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.

HTML

<div id="Home-Image">   

    <h1>Images</h1>
    <ul id="Home-Images">
        <li><a href="#"><img src="" width=100 height=100/></a></li>
        <li><a href="#"><img src="" width=100 height=100/></a></li>
        <li><a href="#"><img src="" width=100 height=100/></a></li>
        <li><a href="#"><img src="" width=100 height=100/></a></li>
        <button id="toggle-two">View more Images</button>
    </ul>

JavaScript

$(document).ready(function() {
var files = {'jpg':4};
var pageName = "d";
for (var ext in files){
for (var i = 0; i < 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);
}});    

Answer 1

Modified code: jsfiddle

HTML:

<div id="Home-Image">   

    <h1>Images</h1>
    <ul id="Home-Images">

        <button id="toggle-two">View more Images</button>
    </ul>​

JS:

$(document).ready(function() {
    var files = {'jpg':4};
    var pageName = "d";
    var html = "", src;
for (var ext in files){
     for (var i = 0; i < files[ext]; i++){
         src = "../Images/D/allimages" + pageName + "-" + (i+1) + "." + ext;
         html += '<li><a href="#"><img src="'+ src +'" width=100 height=100/></a></li>';

     }

    $("#Home-Images").prepend(html );
}}); ​

Answer 2

Maybe you want something like this

$(document).ready(function() {
    var files = {'jpg':4}, pageName = "d", container = $('#Home-Images');
    for (var ext in files)
    {
        for (var i = 0; i < files[ext]; i++)
        {
            var src = "../Images/D/allimages" + pageName + "-" + (i+1) + "."+ext ;
            var img = $('<img src="'+src+'" width=100 height=100 />'); 
            container.append($('<li/>').html($('<a/>', {'href':'#'}).html(img)));
        }
    }
}); 

But make sure this path http://yourDomain/Images/D/allimagesd-1.jpg ​is right for all images. Here is a demo but images are not available but you can see the source by browser inspection tool.