Question

When viewing this url http://dl.dropbox.com/u/1550420/jquery/flickr.html, we see a list of images pulling from an API (flickr).

I’d like to inject the following image http://dl.dropbox.com/u/1550420/jquery/chicago-008.jpg into the 3rd position of my list, thus increasing the length of my list.

In summary, the list would have 1 image inserted into it at the 3rd position. The image would come from a unique url, not from the same API.

How do I accomplish that?

Here’s my code, in case the link above doesn’t work:

<script>
    $(document).ready(function() {
        $.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=675729@N22&lang=en-us&format=json&jsoncallback=?", function(data){
          $.each(data.items, function(){
            var raffie = '<a href="' + this.link + '"></a>';
            $('<li></li>')
            .append(raffie)
            .appendTo('#pic');
            $('<img />').attr('src', this.media.m)
            .appendTo('#pic');
          });
        });
    });
</script>

and here’s the hard-coded html from the body:

<ul><li id="pic"></li></ul>

Answer 1

After you’re done appending all your images to the DOM, you should select the 2nd image, and insert that other image after it:

$('#pic img:eq(1)').after('<li><img src="http://dl.dropbox.com/u/1550420/jquery/chicago-008.jpg" /></li>');

Here’s the fiddle: http://jsfiddle.net/LbtWJ/ .

P.S. You shouldn’t be appending your images to the DOM separately, but that’s besides the point.