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.

.css(), .html() and so on.

emerson.marini
– emerson.marini

2014-05-29 12:08:27 +00:00
Commented May 29, 2014 at 12:08 — emerson.marini
– emerson.marini, Commented May 29, 2014 at 12:08
$('element').css('margin','20px').css('padding','');

bigData
– bigData

2014-05-29 12:09:23 +00:00
Commented May 29, 2014 at 12:09 — bigData
– bigData, Commented May 29, 2014 at 12:09

adeneo · Accepted Answer · 2014-05-29 12:15:10Z

5

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();
         }
    }
});

answered May 29, 2014 at 12:15

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Catalyst Over a year ago

Each of the left-hand keys here also have corresponding getter/setter methods, which can be chained and used at any time.

Alex Char · Accepted Answer · 2014-05-29 12:14:23Z

4

You can also do something like this:

js

$("<div/>",{
    id: "a",
    text:"sadsad",
    style:"background-color:red;height:50px;",
    class: "classA"
  }).appendTo("body");

fiddle

answered May 29, 2014 at 12:14

Alex Char

33.3k9 gold badges51 silver badges71 bronze badges

Comments

Shaunak D · Accepted Answer · 2014-05-29 12:10:12Z

3

Use this .css()

$('#div' + WidgetDetails.Name + 'QuickPanel').css({
    "background-image":"/path",
    "margin":"20px",
    "padding":"4px"
});

answered May 29, 2014 at 12:10

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

1 Comment

Arvin Over a year ago

Thanks for the answer.I know this way, but I need it in the format I specified in the question,

Collectives™ on Stack Overflow

Creating div element using jquery and adding inner html

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related