I have one html file with a "rialtoImg" image and "dummylink" link. When I click on the link I want to load another html into a run-time constructed div and move existing image into this new div. My two questions are:

Why loading of anotherRialto.html does not produce results(i.e image anotherRialto.jpg is not visible)?
Why html() property is empty in the first element of #imageDiv and "id" is equal to imageDiv? I

They are also embedded in my js code shown below.
Entire test project is also attached to this post.

I will appreciate any help with these issues.

1. 
   $(document).ready (   function()  {
           $('#dummylink').click ( function(event)
               { prepareImages(event); } );  } );
   
   
   
2. // move build-in image into the new div, load another image from external file
   // count # of images in the new div.
   function prepareImages(event) {
       event.preventDefault(); 
   
   
   
   
3.    $('<div id="imageDiv"></div>').hide().appendTo('body'); 
   
4.     // select image on the main page with id "rialtoImg" and append to imageDiv
       $('.image #rialtoImg').appendTo('#imageDiv');
   
5.     // load another image from an external html file and insert in in the imageDiv. 
   // Question:
   //  Why loading of anotherRialto.html does not produce results(i.e image anotherRialto.jpg is not visible)?
       $('#imageDiv').load('anotherRialto.html', function() { countImages(); });
   }
   
   
6. function countImages()
   {
       var t = $('#imageDiv').length;
   
   
7.     alert('number of images in imageDiv:' + t);
       if (t >0 ) {
   
8. // Why html() property is empty in the first element of #imageDiv and "id" is equal to imageDiv? I expected it to be the rialtoImg element...
           $('#imageDiv').each(function(index, element) {
               alert(index + 'html:' + $(element).html() + " id:" + $(element).attr('id'));
           });
       }
       
       $('#imageDiv').fadeIn();
   }