Adding a CSS node into unknown pages using jquery [duplicate]

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" />');

<font> is deprecated, and it's not a requirement that the plugin requires anyway, use <mark> or <span> — zer00ne
– zer00ne, Commented Aug 21, 2016 at 11:19
Why the downvote? You don't understand the question or don't agree with the premise? — Robin Rodricks
– Robin Rodricks, Commented Aug 21, 2016 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
– JJJ, Commented Aug 21, 2016 at 11:28
As per @Juhana's link to the question above, you could check for a duplicate (answer on the same question): stackoverflow.com/a/29356581/6240567 — Geoff James
– Geoff James, Commented Aug 21, 2016 at 11:31

zer00ne · Accepted Answer · 2016-08-21 13:18:44Z

2

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.

edited Aug 21, 2016 at 13:18

answered Aug 21, 2016 at 12:39

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

zer00ne Over a year ago

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 Over a year ago

@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.

David Thomas Over a year ago

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).

zer00ne Over a year ago

"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.

Collectives™ on Stack Overflow

Adding a CSS node into unknown pages using jquery [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related