How to use CSS with dynamically inserted elements

Question

How can I insert an element (<ui>) dynamically with some formatting inside an already existing element?

E.g.:

$("#contentDiv").append('<ui id="contentUi">');
$("#contentUi").css({ "text-align": "center", "list-style-type": "none"});
$("#contentDiv").css({ "text-decoration": "none","font-size":" 1.30em","font-weight": 
          "bold"});

Here #contentDiv is the id of an element <div id="contentDiv">, and I'm appending a new element <ui> to it.

Line 3 is working perfectly fine but line 2 has no effect on screen.

Why don't you paste it all in line 3? Why is there a #ContentUI in the second line and what do you append? You need to explain your question some more. — Tim
– Tim, Commented Jul 8, 2011 at 10:03
I agree with @Tim - more information needed, give relevant (pared-down) html, and i suggest you change title (no stylesheet involved in question) and tag jquery and javascript — xec
– xec, Commented Jul 8, 2011 at 10:11
What is #contentUi here? And what is that element("") anyway? Empty string or real element you mean? Is #contentUi the element you're trying to insert? — spliter
– spliter, Commented Jul 8, 2011 at 10:35

Maverick · Accepted Answer · 2011-07-08 12:58:15Z

1

There is no need to define the css with jQuery here I think. Just have a class predefined in your stylesheet, mush simpler that way.

For an example.

$("#contentDiv").append('<ui class="predefined-class">');
$("#contentDiv").addClass('another-predefined-class');

And in your CSS you would have

.predefined-class {
     text-align: center; 
     list-style-type: none;
}

.another-predefined-class {
     text-decoration:none;
     font-size: 1.30em;
     font-weight: bold;
}

I hope this is what you were after.

Also I do not know how good is you appending an empty ul, since it is purposeless without the lis

answered Jul 8, 2011 at 12:58

Maverick

2,0165 gold badges25 silver badges31 bronze badges

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

Comments

Jason Gennaro · Accepted Answer · 2011-07-08 13:09:50Z

0

You won't be able to add list-styles to a non-existent element <ui>

Change this line

$("#contentDiv").append('<ui id="contentUi">');

to

$("#contentDiv").append('<ul id="contentUi">');

Note: ui to ul

http://jsfiddle.net/jasongennaro/NKZS3/

answered Jul 8, 2011 at 13:09

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Collectives™ on Stack Overflow

How to use CSS with dynamically inserted elements

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related