How can I get the image shown on the website with following ajax jquery request

Question

I'm trying to load images on a website with a ajax jquery request from the following thread

Simple Ajax Jquery script- How can I get information for each of the rows in the table?Simple Ajax Jquery script- How can I get information for each of the rows in the table?

I have the following script

    <script type="text/javascript">
    $.ajax({                                      
     url: 'loadImage.php', data: "", dataType: 'json',  success: function(rows)        
     {
      for (var i in rows)
      {
        var row = rows[i];          

        var no = row[0];
        var image = row[1];

        $('#output').append('<img src="/path/to/image/' + image + '"/>');   
       } 
      } 
    });
    </script>

Because the images don't show on the website I left off the "<" at the beginning of the .append() statement:

    $('#output').append('img src="/path/to/image/' + image + '"/>');

and it shows me a text list of the images - so far the request is working. It gets the image information from the database. When I add the "<" in the beginning of the .append() statement no image is shown on the website.

    $('#output').append('<img src="/path/to/image/' + image + '"/>');

What do I have to change so that the images are shown?

Thanks

Edit . . .

If I drop the "<" in the beginning of the .append statement I get the following output:

img src="/pictures/CDs/CDBa_Zen_Hymn_Mix_03.jpg" width="450" height="450" border="0" />img src="/pictures/CDs/CDBa_Hymns_Stream_02.jpg" width="450" height="450" border="0" />img src="/pictures/CDs/CDBa_Virt_Piano_02.jpg" width="450" height="450" border="0" />img src="/pictures/CDs/CDBa_Hy_Planets_Uranus.jpg" width="450" height="450" border="0" />

With "<" in the statement I get no output.