Convert JQuery code to its JavaScript equivalent

Question

I'm modifying some legacy code and I found a web page that loads the JQuery library only to perform the following (this is inside a <script> tag in the <body> of the page):

$(document).ready(function(){ 
  //Once the document is ready, run the following code
  $("head").append($("<link rel='stylesheet' href='style-"+myCSS+".css' type='text/css' media='screen' />"));
});

I want to convert this code to regular JavaScript and remove JQuery (I'm not against the use of JQuery, I'm against the idea of having to load 90+Kb only to do that).

My idea, but I'm not a JS expert, is to use (in the same position in the page):

headReference.innerHTML = "<link rel='stylesheet' href='style-" + myCSS + ".css' type='text/css' media='screen' />";

Is there any better solution?

Any help is appreciated.

If that's all it does, where does the myCSS variable come from? — adeneo
– adeneo, Commented Sep 2, 2012 at 8:56
Your solution is fine, but remember that append adds the HTML content to the node, while your solution replaces it. You can use the += operator, or create a dummy <div>, put the content there and appending its children to headReference. — MaxArt
– MaxArt, Commented Sep 2, 2012 at 8:57
The 90kb of jQuery are part of what makes the JavaScript code which jQuery implements behind the scenes cross-browser compatible. Sure your current code will most likely work well in all browsers if in plain JavaScript but the next developer (or yourself) having to add something later might end up to not work as expected in all browsers. Seeing you yourself do not have the knowledge on how to do something in plain JavaScript (not intended as an insult) how do you expect the next guy to cope with that and cross-browser issues? I would recommend to stick with 90kb for those reasons. — Nope
– Nope, Commented Sep 2, 2012 at 9:17
Cumulative reply: the value of myCSS is determined by a test (iPhone/iPad resolution, basicly). I forgot to mention that cross compatibility here in not an issue because I'm in a mobile app context and I'm sure WebKit is the only engine used. — ContentiousMaximus
– ContentiousMaximus, Commented Sep 2, 2012 at 9:32

jfriend00 · Accepted Answer · 2012-09-02 09:08:57Z

3

Here's the equivalent plain javascript:

var head = document.getElementsByTagName("head")[0];
var link = document.createElement("link");
link.rel = 'stylesheet';
link.type = 'text/css';
link.media = 'screen';
link.href = 'style-'+myCSS+'.css';
head.appendChild(link);

If it matters to load that after the document has loaded (which is probably not required), then you can place this code in a script tag right before the end of the <body> tag - otherwise, you can put it anywhere in the <body> element.

edited Sep 2, 2012 at 9:08

answered Sep 2, 2012 at 9:01

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

1 Comment

ContentiousMaximus Over a year ago

It's perfect, it's the exact translation of what that JQuery code does and the right reply to my chaotic question, but MaxArt comment made me consider that the goal of that code is a replacement.

RobG · Accepted Answer · 2012-09-02 10:03:19Z

1

jfriend00's answer is fine, here's another approach which is a bit closer to the jQuery original:

var h = document.createElement('head');
h.innerHTML = "<link rel='stylesheet' href='style-" + 
              myCSS + ".css' type='text/css' media='screen'>"
document.getElementsByTagName('head')[0].appendChild(h.firstChild);

answered Sep 2, 2012 at 10:03

RobG

148k32 gold badges180 silver badges216 bronze badges

Collectives™ on Stack Overflow

Convert JQuery code to its JavaScript equivalent

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related