Question

The replacement is done in real time – user clicks something, the style changes:

$('link#mystyle').attr('disabled', 'disabled');
$('link#mystyle').remove();

if(new_style){
  $('head').append('<link rel="stylesheet" id="mystyle" href="' 
                    + new_style +'.css" type="text/css" />');

}

The problem is that by default there is a inline style block after the stylesheet link:

<style>
  ...
</style>

And my code above will remove the original stylesheet, and append the new stylesheet after the style block, so the new stylesheet will override some rules from the style block.

I don’t want that, so can I somehow append my new style in the same place, so the rules inside the new stylesheet are applied with the same priority as the initial stylesheet rules?

Answer 1

@Kroehre is right, but if you insist on doing it your way there is the http://api.jquery.com/replaceWith/ method.

$('link#mystyle').replaceWith('<link rel="stylesheet" id="mystyle" href="' 
                + new_style +'.css" type="text/css" />');

should do what you want.