How can I inject an image into a list of images pulling from an API using jQuery?

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>

score 1 · Accepted Answer · answered Aug 18 '11 at 04:06

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.

answered Aug 18 '11 at 04:06

Joseph Silber

214,931
59
362
292

Hi, Joseph, thanks so much! Can you explain your "P.S.", i.e., why shouldn't I be appending images to the DOM separately? – Sergi Aug 28 '11 at 19:14
@user654227: http://stackoverflow.com/questions/2690352/which-is-better-string-html-generation-or-jquery-dom-element-creation – Joseph Silber Aug 28 '11 at 19:43

score 0 · Answer 2 · answered Aug 18 '11 at 04:06

In your code, it looks like appending li into another li, which is not allowed.

How about this. Markup looks like this: (<li> is not really necessary since we are overwriting it, but this way page validates)

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

Then the JS code looks like this:

<script type="text/javascript">
    $(document).ready(function() {
        $.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=675729@N22&lang=en-us&format=json&jsoncallback=?", function(data)
        {
            var html = '';
            $.each(data.items, function()
            {
               // Avoid appending to document DOM multiple times to improve performance
               html += '<li><a href="' + this.link + '"><img src="' + this.media.m + '"/></a></li>')
            });
            // 3rd hardcoded image
            html += '<li><a href="#"><img src="http://dl.dropbox.com/u/1550420/jquery/chicago-008.jpg"/></a></li>';

            // Now put it into the page
            $('#pic').html(html);
        });
    });
</script>

Hi, pixelfreak, I updated my doc per your suggestions, but it didn't work (see dropbox link up above). — Sergi, Aug 28 '11 at 19:19

How can I inject an image into a list of images pulling from an API using jQuery?

2 Answers2