Question

Id='a';      
linkId   = '#dialog_link' + Id;

htmlCode = '<p><a href="#" id="' + linkId + '" class="ui-state-default ui-corner-all"><span></span>Open Window</a></p>';        
$('#WindowsContainer').append(htmlCode);

$(linkId).css('padding: .4em 1em .4em 20px;text-decoration: none;position: relative;');
$(linkId + ' span.ui-icon').css('margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;');

Last two lines didn’t affect style of a with id# “dialog_linka”.

Answer 1

Try this:

$(linkId).css({ 
    padding: ".4em 1em .4em 20px",
    "text-decoration": "none",
    position: "relative"
});

You might want to re-read the API and check what kind of values $.css() accepts.

EDIT: If it doesn’t work, it’s because you haven’t created the HTML correctly:

htmlCode = '<p><a href="#" id="' + linkId + '" ...'

because linkId is "#dialog_linka", the id attribute is id="#dialog_linka", when it should be dialog_linka (without the hash).

Also, you don’t have any element with class .ui-icon, at least in the example code.

See http://jsfiddle.net/YDYA6/ for a demo.