jquery css with dynamically created element not working

Question

I'm creating an element using jquery then appending it to another one. I'm trying to style my header but it doesn't seem to be working for some reason. There doesn't seem to be any syntax errors. It's appending to the div and the text is appearing, it's just not being styled.

 jQuery('<h3/>', {

text: 'Todays news',
css: ('background-color', 'red'),
id: 'tdn'

}).appendTo('#div1');

Any help would be appreciated

Felix · Accepted Answer · 2014-04-24 02:57:09Z

1

Try to wrap your CSS style inside { } instead of ( )

jQuery('<h3/>', {
    text: 'Todays news',
    id: 'tdn',
    css: {'background-color': 'red'},
}).appendTo('#div1');

Fiddle Demo

or you can use .css() as well:

jQuery('<h3/>', {
    text: 'Todays news',
    id: 'tdn'
}).css('background-color', 'red').appendTo('#div1');

Fiddle Demo

answered Apr 24, 2014 at 2:57

Felix

38.2k8 gold badges45 silver badges56 bronze badges

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

Comments

xno · Accepted Answer · 2014-04-24 02:59:26Z

1

Try using {} instead of () for your css parameters

$('<h3/>', {

text: 'Todays news',
    css: {'background-color': 'red'},
id: 'tdn'

}).appendTo('#div1');

http://jsfiddle.net/xerxesnoble/e93Hj/

answered Apr 24, 2014 at 2:59

xno

1,2711 gold badge13 silver badges20 bronze badges

Comments

Amit Joki · Accepted Answer · 2014-04-24 02:59:50Z

1

You can do this:

jQuery('<h3/>', {
    text: 'Todays news',
    id: 'tdn'
    style: 'background-color:red'
}).appendTo('#div1');

Demo

answered Apr 24, 2014 at 2:59

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Comments

Reigel Gallarde · Accepted Answer · 2014-04-24 02:59:55Z

1

use style: instead of css:

 jQuery('<h3/>', {

text: 'Todays news',
style: "background-color:red",
id: 'tdn'

}).appendTo('#div1');

answered Apr 24, 2014 at 2:59

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Collectives™ on Stack Overflow

jquery css with dynamically created element not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related