How to insert images dynamically to DOM?
<p>I'm trying to preload images by creating dynamically div and appending to it image object, but unfortunately divs are created but images are not being attached to them. Here's the code:</p>

<pre><code>var preLoadImages = function(im) {
    var args_len = im.length;
    var slides = $('.slides');
    for (var i = args_len; i--;) {
        var img = $('&lt;img&gt;', {
            src : 'img/' + im[i] + '.jpg',
            alt : kp.imgAlt[i]
        })
      img.load(function(){
        (function(index){ 
            kp.cache.push(img);
            var toAppend = $('&lt;div class="slide"&gt;&lt;/div&gt;')
                            .css({'z-index' : (args_len - index) + 'px'})
                            .append(kp.cache[index]);
            slides.append(toAppend);
            kp.setTimer();
            kp.startSlideshow();
            if(i == 0){
                $('.slides #cover').fadeOut(800, function(){
                    $(this).remove();
                });
            }
        })(i);
      });

    }
  };
</code></pre>

<p>What am I doing wrong? When I'm debugging page with Firebug it shows me that images are created properly and exists in <code>kp.cache</code> variable.</p>
