how to create temporary div and remove everything except the first image jquery

Question

I'm trying to develop mobile app with jquery mobile for my webpage. I get the content in json format whatever the topic is I want to get to create temporary div with jquery when I will place description value which I get from JSON feed and I want to get only first image tag from that div and output it along the item title. This is what I have:

   function artikujt(data)
{
    console.log(data.query.results.item[0]);
    var path = data.query.results; //vendodhja e array-it me artikuj
    var output = '<ul data-role="listview" data-inset="true">';
    var id = '';
    var temp = '';
    $.each (path.item,function(key,val){
        id_temp= val.guid.content.replace(/[^0-9 ]/g, '');
        //id=val.guid.content.replace('^\d');
        id= id_temp.substring(0,4);
        var tempDiv = '<div id="tempDiv"' + val.description + '</div>';
        temp = $('#tempDiv').find('img:first');
        output+='<li>';
        output+='<a href="#blogpost" onclick="showPost('+ id +')">';
        output+='<p>' + temp + '</p>';
        output+='<h3 style="word-wrap:break-word;">'+ val.title +'</h3>';
        output+='<p>ID: ' + id + '</p>';
        output+='</a>';
        output+='</li>';
        //console.log(val.title);
    });
    output+='</ul>';
    $('#shfaqLajmet').html(output);

}

From that val.description I want to remove all content except the first image tag which is there inside the description. Whith these code I got [object Object] message only

EDIT:

my HTML: This is the div where I display the results:

<div data-role="content" id="shfaqLajmet"> 
     <!-- Lajmet ne faqen kryesore -->
 </div>
<script src='https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20feed%20where%20url%3D%22http%3A%2F%2Ffeeds.feedburner.com%2Fradio-pendimi%2FVpZJ%22&format=json&diagnostics=true&callback=artikujt'></script>

Answer 1

You can't use $('#tempDiv') because the div with that ID hasn't been added to the DOM yet (nor is it even an element yet, so jQuery will never find it).

So now, if val.description is HTML, you might wrap it up in a jQuery object (to actually create the DOM element) and then use .find() to pull out the image part:

var tempDiv = $('<div id="tempDiv">' + val.description + '</div>');
temp = tempDiv.find("img:first");
...
output += '<p>' + $('<div>').append(temp).html() + '</p>';

Also, you have a typo:

var tempDiv = '<div id="tempDiv"' + val.description + '</div>';
                                ^ no closing angle bracket