jquery не добавляет, но заменяет содержимое div

Question

Я пытаюсь добавить набор html-кодов в div, но не будет работать. Я уже пробовал другие решения, размещенные здесь в stackoverflow, но все равно не сработает.

var placeholder = $('<div class="view view-first img" style="cursor: pointer; display: inline-block;" title="Upload Car Image">' + 
          '<input type="hidden" value="" class="photodata photoguid" />' + 
          '<input type="hidden" value="" class="photoid" />' + 
          '<img src="" style="height: 200px; width: 250px;" class="thumbnailPreview" />' + 
          '<div class="mask">' + 
           '<button type="button" class="info btn btn-primary profilepic" style="display: none;" title="Active display photo"><span class="glyphicon glyphicon-bookmark"></span></button>' + 
           '<button type="button" class="info btn btn-danger deletephoto" style="margin-left: 5px; display: none;" title="Delete Photo"><span class="glyphicon glyphicon-trash"></span></button>' + 
          '</div>' + 
         '</div>'); 

$.ajax({ 
      url: $("#saveImageGuid").val(), 
      type: "post", 
      data: '{ recordID: "' + $(".recordID").val() + '", photoguid: "' + fileGroupInfo.uuid + '"}', 
      datatype: "json", 
      contentType: 'application/json', 
      beforeSend: function() { 
       $(".uploadcontainer").find("#alertmessage").remove(); 
      }, 
      error: function (data) { 
       alertmessage.attr("class", "alert alert-danger alert-dismissible"); 
       alertmessage.find("#message").text(data.status); 
       $(".uploadcontainer").append(alertmessage); 
      }, 
      success: function (data) { 
       if (data.statusCode == 500) 
       { 
        alertmessage.attr("class", "alert alert-danger alert-dismissible"); 
       } 
       else 
       { 
        alertmessage.attr("class", "alert alert-success alert-dismissible"); 

        var guids = jQuery.parseJSON(data.guids); 
        var thumbnails; 

        $.each($(guids), function (key, value) { 
         var uploadcaregeturl = "@Config.UploadCareGETUrl"; 
         uploadcaregeturl = uploadcaregeturl.replace("{0}", value); 

         placeholder.find(".thumbnailPreview").attr("src", uploadcaregeturl); 

         $(".thumbnailcontainer").append(placeholder); 
        }); 
       } 
      } 
     }); 

Я получаю список из контроллера затем поместить его в атрибут IMG SRC, а затем добавить его в Div. После выполнения цикла в успешной части ajax он не добавляет каждый placeholder, а вместо этого заменяет то, что было добавлено в предыдущем цикле. Любые идеи, в которых я ошибся.

Answer 1

Получил это сейчас. Я поместил местозаполнитель внутри участка успеха, а также перестроил свои коды в контроллере для лучшей обработки статусных кодов.

$.ajax({ 
     url: $("#saveImageGuid").val(), 
     type: "post", 
     data: '{ recordID: "' + $(".recordID").val() + '", photoguid: "' + fileGroupInfo.uuid + '"}', 
     datatype: "json", 
     contentType: 'application/json', 
     beforeSend: function() { 
      $(".uploadcontainer").find("#alertmessage").remove(); 
     }, 
     error: function (data) { 
      alertmessage.attr("class", "alert alert-danger alert-dismissible"); 
      alertmessage.find("#message").text(data.status); 
      $(".uploadcontainer").append(alertmessage); 
     }, 
     success: function (data) { 
      alertmessage.attr("class", "alert alert-success alert-dismissible"); 

      var guids = jQuery.parseJSON(data.guids); 
      var thumbnails; 

      $.each($(guids), function (key, value) { 
       var placeholder = $('<div class="view view-first img...'); 

       var uploadcaregeturl = "@Config.UploadCareGETUrl"; 
       uploadcaregeturl = uploadcaregeturl.replace("{0}", value); 

       placeholder.find(".thumbnailPreview").attr("src", uploadcaregeturl); 

       $(".thumbnailcontainer").append(placeholder); 
      }); 
     } 
    });