title: JQuery appending '[object, Object]' rather than image
body: <p>I am using the <code>$.getJSON</code> function of JQuery to download the urls of some images and I am trying to output them inside a div. I am trying to get the output to look like this:</p>
  
  <pre><code>&lt;a href="the image url (shot.short_url)"&gt;&lt;img src="the direct image url (shot.image_teaser_url)" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>However, it is outputting this instead: </p>
  
  <pre><code>&lt;div id="body-wrapper"&gt;
      &lt;a href="http://drbl.in/300896"&gt;[object Object]&lt;/a&gt;
      &lt;a href="http://drbl.in/298080"&gt;[object Object]&lt;/a&gt;
      &lt;a href="http://drbl.in/290395"&gt;[object Object]&lt;/a&gt;
      &lt;a href="http://drbl.in/290324"&gt;[object Object]&lt;/a&gt;
      &lt;a href="http://drbl.in/268595"&gt;[object Object]&lt;/a&gt;
      &lt;a href="http://drbl.in/265197"&gt;[object Object]&lt;/a&gt;
      &lt;a href="http://drbl.in/256368"&gt;[object Object]&lt;/a&gt;
      &lt;a href="http://drbl.in/252519"&gt;[object Object]&lt;/a&gt;
      &lt;a href="http://drbl.in/242235"&gt;[object Object]&lt;/a&gt;
      &lt;a href="http://drbl.in/241676"&gt;[object Object]&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please can you tell me where I am going wrong in the case out outputting the image?</p>
  
  <p>This is my code: </p>
  
  <pre><code>function work() {
              $('#body-wrapper').empty();
              $.getJSON("http://dribbble.com/jakekrehel/shots.json?callback=?", function(data){
                  $.each(data.shots, function(i,shot){
                    var image = $('&lt;img/&gt;').attr('src', shot.image_teaser_url);
                    var title = '&lt;a href=\"' + shot.short_url + '\"&gt;';
                    var string = title;
                    string = string + image;
                    string = string + '&lt;/a&gt;';
                    $('#body-wrapper').append(string);
                  });
                });
          }
  </code></pre>