Question

I am dynamically appending a .css file to a page. Does it matter if the .css file is already in a link? How can I check to see if the link already exists, I thought of checking in the head with javascript. Here is how I am appending the class:

<script type="text/javascript">
(function(){
    var AppendNewStyle = document.createElement("link");
    AppendNewStyle.setAttribute("href", "/Content/Extras.css");
    AppendNewStyle.setAttribute("rel", "stylesheet");
    AppendNewStyle.setAttribute("type", "text/css");
    $('head')[0].appendChild(AppendNewStyle);
})();
</script>

Can I throw a check in here to see if the file is already in the head or should I just not worry about having two linked?

Answer 1

You should be able to query for those link elements like any other element. Since you’re using Jquery:

var allLinks = $("link");

Furthermore, you could use an attribute selector to find the link you care about:

var myLink = $('link[href="' + url +'"]');  //Find the link that matches your URL

If you do this in a script tag that’s below where the link tag should be, you shouldn’t really have any timing problems.

---

2017-04 Edit:

Template literals make this even yummier!

var myLink = $(`link[href="${url}"]`)

And for all you Jquery haters out there:

var myLinks = document.querySelectorAll(`link[href="${url}"]`)