Check to see if css ref link is present before adding one

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: ``` ``` 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?

Accepted Answer

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}"]`)
```

Check to see if css ref link is present before adding one

Solution

Problem