如何设置动态数据的CSS属性

Question

I am using javascript to write some content in a div tag. The data is received through ajax. Here is the script

 $.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>');  
            }

            }
        });

Now I am trying to set the css property of this div (having id 'pastePhotos') which is display:inline-table . But its not working. Its showing the images and the delete button like a text in a single line.

Question:-
SO how can i set the css property for it?

Note:-
I have already tried the following things
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

There is no need to put the styles inline in the Javascript code. Since you have already given an id , you can simply add the styles in a CSS file or style element

#pastePhotos {
    display: inline-table;
}

However, the main problem seems to be missing style for the img and input elements. For this, you must add a

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

and wrap them in an additional div for the 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

You can either use jquery to directly add css attributes

As in $('#pastePhotos').css (propertyName, value )

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

or if you have your attributes as a style class you can also use jquery to add this class

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

Answer 3

Add a complete: function(){} block in the $.ajax({}) . Then add css using javascript by $('#pastePhotos').css("display", 'inline-table') and so on with in that complete block.