How to use CSS with dynamically inserted elements

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-wei开发者_开发知识库ght": 
          "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.

---

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

---

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/