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

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.