Jquery prependTo adds display:block

Cant seem to find the answer to this.

My code looks like this:

var new_img = '<img id="' + drag_id + '" rel="' + drop_id + '" class="' + gallery_link + ' drop_out" src="' + drag_src + '" />';

var drop_img = '<div id="' + ($(ui.draggable).attr("id")) + '" class="not-droppable" rel="' + drop_id + '">' + new_img + '</div>';

$(drop_img).hide().prependTo('li[id=' + drop_id + ']').fadeIn(2000);

When the div with the image inside it is prepended to the LI it adds style:display-block to the div. How do I make it so that the prepended div does not add the style element as the class for this element is display: inline-block?

I have tried setting the style element on the div tag above to display: inline-block; however, this then gets changed to display: block. If I try and set the CSS display: inline-block in the stylesheet to !important the div, style becomes display-none.

Thanks.

Solution

$(drop_img)
    .css('display','none')
    .prependTo('li[id=' + drop_id + ']')
    .fadeIn(2000);

.hide() works on element that already in DOM.