Adding a CSS node into unknown pages using jquery

Question

How can I add a <link> node into the <head> section of a page using jquery? And if the element already exists, it should not be added twice.

I need to add this CSS file because it pulls in additional styling for my search function. This jquery highlighter requires the .highlight class be added to the page, so highlights look yellow.

Edit: I could do this, but it does not check if the element has already been added.

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

`` is deprecated, and it's not a requirement that the plugin requires anyway, use `` or `` — zer00ne, Aug 21 '16 at 11:19
Why the downvote? You don't understand the question or don't agree with the premise? — Robin Rodricks, Aug 21 '16 at 11:25
Why do you care if it's already been added or not? The browser is just going to ignore it in that case. — JJJ, Aug 21 '16 at 11:28
As per @Juhana's link to the question above, you could check for a duplicate (answer on the same question): http://stackoverflow.com/a/29356581/6240567 — Geoff James, Aug 21 '16 at 11:31

zer00ne · Accepted Answer · 2016-08-21T13:18:44.063

The details are commented in the source of the live demo: PLUNKER and the Snippet below:

SNIPPET

/* This script can be placed before the closing </body> tag as is or wrapped in a declared function then called. (ex. function init() {....}) */
// Reference the <head>
var head = document.getElementsByTagName('head')[0];
// This will find a `('link` element with a `[href` attribute with the value ending `$=` with `"style2.css"` `]')`
var style2 = document.querySelector('link[href$="style2.css"]');
// create a <link>
var link = document.createElement('link');
// Add a href attribute with the value of "style3.css" to the new <link>
link.href = 'style3.css';
// Add a rel attribute with the value of 'stylesheet'
link.setAttribute('rel', 'stylesheet');
// If <link href='style2.css'... already exists, then quit, else add the new <link> as the last child of the <head> 
var inject = (style2) ? false : head.appendChild(link);
return inject;

<!doctype html>
<html>
  <head>
    <link hraf='style.css' rel='stylesheet'>
    <link href='style2.css' rel='stylesheet'>
    </head>
  <body>
    <p>Use devtools and find the &lt;head&gt;. You should see the following*:</p>
      <pre><code>
  &lt;head&gt;
    &lt;link rel="stylesheet" href="style1.css"&gt;
    &lt;!--link rel="stylesheet" href="style2.css"--&gt;
    &lt;link rel="stylesheet" href="style3.css"&gt;
  &lt;/head&gt;
       </code></pre>
       *The code displayed above is always green.
      <script src="init.js"></script><!--script wrapped in a declared function in an external js file-->
    <script>
      init(); //Call init() right before the body closing tag or place the whole script here without being wrapped in a declaritive function.
    </script>
  </body>

</html>

This script will run during load and isn't dependent on jQuery.

I intend to, I have never left an answer unedited, you should really inform a fellow user when there's been more than a few minutes after a post. At 8k rep you should give me the benefit of the doubt, sir. — zer00ne, Aug 21 '16 at 12:50
@DavidThomas even though I explained that I would edit my answer (as I always do), you and your "friend" downvoted me. This leads me to believe that you really don't care if the details are here or elsewhere. Please do me a favor and **don't** undo your votes. I like numbers that are factors of 5 and 2, having a rep ending with a 9 bothered me. — zer00ne, Aug 21 '16 at 13:28
Explaining that you will doesn't mean that you will. Now that you actually *have* edited your post - and drawn my attention to that update with a comment - I have, I'm afraid, reversed my vote. Hopefully that doesn't upset you (genuinely, I'm not trying to be combative). — David Thomas, Aug 21 '16 at 13:32
"Explaining that you will doesn't mean that you will." I concede, sir. As a 159k member I should give you the benefit of the doubt as well. No harm no foul, you have a good evening, sir. — zer00ne, Aug 21 '16 at 13:40

Adding a CSS node into unknown pages using jquery

1 Answers1