Jquery add css to head

Question

I am asynchronously adding a few scripts and style sheets to a project that I am building and would like to keep the style sheets all grouped together in the HEAD.

Answer 1

This will place the new link after the last link already in your head element.

$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>");

However if you don't already have a link in place this won't add the new link. Therefore you should do a check first:

var $head = $("head");
var $headlinklast = $head.find("link[rel='stylesheet']:last");
var linkElement = "<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>";
if ($headlinklast.length){
   $headlinklast.after(linkElement);
}
else {
   $head.append(linkElement);
}

---

The OCD in me would like to add it either before my first style link or after the last style link.

You should decide where exactly the link is going to be placed. Theres a chance a different position might override existing styles.

Answer 2

you can use:

.prepend()

http://api.jquery.com/prepend/