javascript - AJAX mvc web api: create div with images -

i working restful api, mvc , ajax. trying data backend , display images inside divs. result should following:

this backend code:

  /*route:api/images*/   [httpget]  public ienumerable<dto> getdata(string id) {         /*do something*/         return dto;/*the dto has imgurl property*/                } 

in front end

<div id="mydiv></div>      <script>     $(document).ready(function () {         $.ajax({             url: "http://localhost:59245/api/api/images",             type: "get",             success: function (data) {                                  (var = 0; < data.length - 1; i++) {                     $('<div class="col-lg-4 col-sm-6"><div class="thumbnail">'+             '<h3 class="centrar">' + data[i].titulo + '</h3><a href="'+             data[i].imagenurl+'</a><p>'+data[i].paragraph+'</p></div>'             ).appendto("#mydiv");                 }             },             error: function (msg) { alert(msg); }         });     }); </script> 

my problem when try display images inside #mydiv, result:

we can see in anchor tag wrapping paragraph in ajax code did not mean this. how fix it? thanks

you dont have img tag. try

<script> $(document).ready(function () {     $.ajax({         url: "http://localhost:59245/api/api/images",         type: "get",         success: function (data) {                              (var = 0; < data.length - 1; i++) {                 $('<div class="col-lg-4 col-sm-6"><div class="thumbnail">'+         '<h3 class="centrar">' + data[i].titulo + '</h3><a href="'+         data[i].imagenurl+'"><img src="'+data[i].imagenurl+'"/></a><p>'+data[i].paragraph+'</p></div>'         ).appendto("#mydiv");             }         },         error: function (msg) { alert(msg); }     }); });