Trouble Appending <div> to existing

Question

I've got the following and I'm trying to add divs inside the container div:

the container div is at the top of the page and is setup like this:

<div id="facebookPhotosContainer" />

now here's the code to populate that div with thumbnails:

    function ShowThumbnails(aThumbs, sPhotoContainerDivID)
    {
        alert("sPhotoContainerDivID: " + sPhotoContainerDivID);
        photoContainer = "div#" + sPhotoContainerDivID;

        for(i = 0, l = aThumbs.length; i < l; i++)
        {
            alert("appending");
            $(photoContainer).append("<div id='thumnailContainer'><img src=" + aThumbs[i].photoSrc + " class='thumbnail' /></div>");
            //$("<div id='uploadThumnailContainer'><img src=" + aThumbs[i].photoSrc + " class='thumbnail' ></img></div>").appendTo("div#" + sPhotoContainerDivID);
        }
    }

Nothing is showing up. Not sure what I'm missing...but it is getting inside the loop and calling the code to try to append here.

Side note: this code is in a page that sits inside an IFrame.

UPDATE:

Here's my latest, still not rendering to the page:

<form id="form1" runat="server">
    <div id="photos-iFrameContent">
        <div>
            <p>Log in</p>
            <p id="loginButtonContainer"><input type="image" id="btnFacebookLogin" src="images/facebookLoginBtn.jpg" /></p>
            <p><select id="albumDropdown" /></p>
            <div id="facebookPhotosContainer" />
        </div>
    </div>
</form>

    function ShowAlbumPhotoThumbnails(aAlbumPhotos, sPhotoContainerDivID)
    {
        alert("sPhotoContainerDivID: " + sPhotoContainerDivID);
        photoContainer = "#" + sPhotoContainerDivID;

        for(i = 0, l = aAlbumPhotos.length; i < l; i++)
        {
            alert("about to append a new div:  aAlbumPhotos[i].facebookPhotoPageSrc: " + aAlbumPhotos[i].facebookPhotoPageSrc);
            alert("html that will be spit out to the page: " + "<div class='uploadThumnailContainer'><img src='" + aAlbumPhotos[i].facebookPhotoPageSrc + "' class='thumbnail' /></div>");
            $(photoContainer).append("<div class='uploadThumnailContainer'><img src='" + aAlbumPhotos[i].facebookPhotoPageSrc + "' class='thumbnail' /></div>");
        }
    }

here's an example of incoming data from those alerts I have set up:

about to append a new div: aAlbumPhotos[i].fullSizePhotoSrc: http://sphotos.ak.fbcdn.net/hphotos-ak-ash2/hs098.ash2/38258_1435105371111_1637262814_1014688_8078397_n.jpg

html that will be spit out to the page:

html that will be spit out to the page:

Answer 1

try just

$('#id')

where id is the id

Answer 2

If your sources have any sort of spacing or quotes it'll throw it way off with invalid HTML, make sure your have quotes on your src="" and use a class instead of an ID for the <div> wrapper, like this:

$(photoContainer).append("<div class='thumnailContainer'><img src='" + aThumbs[i].photoSrc + "' class='thumbnail' /></div>");

Or a bit easier/cleaner using the$(html, props) method:

$("<img />", { src: aThumbs[i].photoSrc, "class": "thumbnail" })
   .wrap("<div class='thumnailContainer'></div>")
   .appendTo(photoContainer);

The ID on the wrapper isn't a good idea since it's in a loop and will not be unique if there' more than one thumbnail here. It isn't likely causing your current issue, but better to fix it anyway.

Answer 3

I got it to work here: http://jsfiddle.net/v7qTP/ by removal of the empty select

<form id="form1" runat="server"> 
    <div id="photos-iFrameContent"> 
        <div> 
            <p>Log in</p> 
            <p id="loginButtonContainer"><input type="image" id="btnFacebookLogin" src="images/facebookLoginBtn.jpg" /></p> 
                        <div id="facebookPhotosContainer" />
    </div> 
</form> 

here is the code I used to verify (added the object and function call to have a source)

var myphoto = [{facebookPhotoPageSrc:'http://sphotos.ak.fbcdn.net/hphotos-ak-ash2/hs098.ash2/38258_1435105371111_1637262814_1014688_8078397_n.jpg'}];
$(document).ready(function()
                  {
                      ShowAlbumPhotoThumbnails(myphoto,"facebookPhotosContainer");
                  });
function ShowAlbumPhotoThumbnails(aAlbumPhotos, sPhotoContainerDivID) 
{ 
    //alert("sPhotoContainerDivID: " + sPhotoContainerDivID); 
    photoContainer = "#" + sPhotoContainerDivID; 

    for(i = 0, l = aAlbumPhotos.length; i < l; i++) 
    { 
       // alert("about to append a new div:  aAlbumPhotos[i].facebookPhotoPageSrc: " + aAlbumPhotos[i].facebookPhotoPageSrc); 
        //alert("html that will be spit out to the page: " + "<div class='uploadThumnailContainer'><img src='" + aAlbumPhotos[i].facebookPhotoPageSrc + "' class='thumbnail' /></div>"); 
        $(photoContainer).append("<div class='uploadThumnailContainer'><img src='" + aAlbumPhotos[i].facebookPhotoPageSrc + "' class='thumbnail' /></div>"); 
    } 
} 

sample with two objects in the array:

var myphoto = [{facebookPhotoPageSrc:'http://sphotos.ak.fbcdn.net/hphotos-ak-ash2/hs098.ash2/38258_1435105371111_1637262814_1014688_8078397_n.jpg'},{facebookPhotoPageSrc:'http://sphotos.ak.fbcdn.net/hphotos-ak-ash2/hs098.ash2/38258_1435105371111_1637262814_1014688_8078397_n.jpg'}];