Creating div element using jquery and adding inner html

Question

Im making some div element dynamically

var QuickPanelItem = $('<div/>', { 'id': 'div' + WidgetDetails.Name + 'QuickPanel', 'class': 'left_slidethumbs button_' + WidgetDetails.Name + '' });            
QuickPanelItem.append($('<div/>', { 'class': 'text_button' }));
$("#divLeftQuickPanel").append(QuickPanelItem);

my doubt is

$('<div/>', { 'class': 'text_button' })

we can add attributes of the element by writting them in the flower brackets as in the above line, But how can we add background-image,margin,padding etc which comes under style property. Also adding inner html.

Answer 1

You can do it the exact same way, as jQuery supports any jQuery method in the object passed when creating a new element

$('<div />', { 
    'class': 'text_button',
    css    : {
          backgroundImage : 'url(image.png)',
          margin : '10px 20px 3px 5px'

    },
    html   : '<p>CONTENT</p>',
    on     : {
         click : function() {
            alert();
         }
    }
});