Как установить свойство css для динамических данных

Question

Я использую javascript для записи некоторого содержимого в теге div. Данные принимаются через ajax. Вот сценарий

$.ajax({ 
      url :' the url', 
      data : { 
       productValue: selectedText, 
       giveMyId : saveMyName 
      }, 
      type: 'POST', 
      dataType: 'json', 
      success: function(data) 
      { 
       var imageHTML=''; 
       var dataLength=data.length; 
       photosHasPath=data[0]; 
       if(dataLength > 1) 
       { 
       for(var i=1;i<dataLength;i++) 
       { 
        allProductNames.push(data[i]); 
        imageHTML += '<img src="' + photosHasPath + data[i] + '" height="100" width="100" style="padding: 0.5em;">' + 
          ' <input type=\"button\" class=\"deletePhoto\" value=\"Delete\" name=\"'+data[i]+'\">'; 
       } 
       $('#pastePhotos').html(imageHTML); 
      } 
      else 
      { 
       $('#pastePhotos').html('<i>No photos left.</i>'); 
      } 

      } 
     }); 

Теперь я пытаюсь установить CSS свойство этого DIV (имеющего идентификатор «pastePhotos»), который является дисплей: встроенный-таблица. Но это не работает. Он показывает изображения и кнопку удаления, как текст в одной строке.

Вопрос: -
ТАК как я могу установить для него свойство css?

Примечание: -
Я уже пробовал следующие вещи
1.

imageHTML += '<img src="' + photosHasPath + data[i] + '" height="100" width="100" style="padding: 0.5em; display: inline-table;">' + 

' <input type=\"button\" class=\"deletePhoto\" value=\"Delete\" name=\"'+data[i]+'\">'; 

2. '<div style="display: inline-table;">' + imageHtml + '</div>'

3. <div id="pastePhotos" style="display: inline-table;">

Answer 1

Нет необходимости вставлять стили inline в код Javascript. Так как вы уже дали id, вы можете просто добавить стили в файле CSS или style элемента

#pastePhotos { 
    display: inline-table; 
} 

Однако главная проблема, кажется, не хватает стиля для img и input элементов. Для этого необходимо добавить

#pastePhotos img, #pastePhotos input { 
    display: table-cell; 
} 

и завернуть их в дополнительном div для table-row

imageHTML += '<div class="img-row"><img src="' + photosHasPath + data[i] + '" height="100" width="100" style="padding: 0.5em;">' + 
      ' <input type=\"button\" class=\"deletePhoto\" value=\"Delete\" name=\"'+data[i]+'\"></div>'; 

#pastePhotos .img-row { 
    display: table-row; 
} 

Answer 2

Вы можете либо использовать JQuery, чтобы непосредственно добавить CSS атрибуты

Как и в $('#pastePhotos').css (propertyName, value)

http://api.jquery.com/css/#css2

или если у вас есть свои атрибуты как класс стиля вы также можете использовать JQuery, чтобы добавить этот класс

$('#pastePhotos').addClass("myStyle"); 

Answer 3

Добавить блок complete: function(){} в $.ajax({}). Затем добавьте css с помощью javascript по $('#pastePhotos').css("display", 'inline-table') и так далее с этим блоком complete.