I am dynamically inserting some html on a web page (after I detect an event from the user). This html needs some css styling and I am wondering what is the cleanest way to do it, using jQuery. I am not the website developer, so I can't add those rules to the original css.

Assume I have already inserted some html without styling, including a formElement class. I can write in my document a new <style> block, for instance:

my_html =  '<style type="text/css">';
my_html += '   .formElement {';
my_html += '       display: block;';
my_html += '       width: 240px;';
my_html += '       position: relative;';
my_html += '       padding: 4px 0;';
my_html += '   }';
my_html += '</style>';
my_html = $(my_html);
$('body').prepend(my_html);

Or, I can use the css method:

$('.formElement').css({
    'display': 'block',
    'width': '240px',
    'position': 'relative',
    'padding': '4px 0'
});

Which solution is the best/cleanest?

EDIT:

As I can't directly add the rules in the CSS, I will stick with the css method of jQuery. Some other related questions provide solutions as well:

I can't really use jQuery plugins, but if I could, I would certainly use jQuery.Rule

Thank you all for your precious help.

javascript jquery css
Edit
Report