Loadin CSS dynamically - jQuery vs plain Javascript

Question

Hi,

I'm loading CSS file in java script code. At first I used jQuery code. It worked fine, but after somet time I realized that CSS rules are not applied in IE browser. So I googled and replaced it with document.createElement version. Now it works smoothly in all browsers. Anybody knows why? Is there a difference in those two approaches?

var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = filename;
cssNode.media = 'screen';
cssNode.title = 'dynamicLoadedSheet';
document.getElementsByTagName("head")[0].appendChild(cssNode);

vs.

var $fileref = $("<link />");
$fileref.attr("rel", "stylesheet");
$fileref.attr("type", "text/css");
$fileref.attr("href", filename);
$fileref.attr("media", "screen");
$fileref.attr("title", 'dynamicLoadedSheet');
$('head').append($fileref);

Thanks, Paweł

P.S. Another tip:

$('head').append($fileref);

document.getElementsByTagName("head")[0].appendChild($fileref[0]);

loading file with first $ approach fails, whereas using document.getElement... works. So, something like this works:

var $fileref = $("<link />");
$fileref.attr("rel", "stylesheet");
$fileref.attr("type", "text/css");
$fileref.attr("href", filename);
document.getElementsByTagName("head")[0].appendChild($fileref[0]);

works.

----------------------- TIP 2 Another kicker:

This one works:

var $fileref = $("<link />");
$fileref.attr("rel", "stylesheet");
$fileref.attr("type", "text/css");
$fileref.attr("href", filename);
document.getElementsByTagName("head")[0].appendChild($fileref[0]);

This one doesn't:

var $fileref = $('<link rel="stylesheet" type="text/css" href="' + filename + '" />')
document.getElementsByTagName("head")[0].appendChild($fileref[0]);

Answer 1

For some reason, IE does not like use of the attr function on link elements. You can use the following construction instead:

var $fileref = $('<link rel="stylesheet" type="text/css" href="' + filename + '" media="screen" title="dynamicLoadedSheet" />')
$('head').append($fileref);

Answer 2

jQuery, among other things (like createDocumentFragment), heavily relies on innerHTML for element creation/manipulation, for it is the fastest way to dynamically create/modify the page content.

Although most browsers support innerHTML, it’s not a part of the W3C standard, and even though it works rather consistently across browsers, it does carry some quirks with it.

For instance, it allows for invalid HTML to be inserted, and hence introduce hard to catch bugs; when removing elements it can introduce memory leaks from events and data associated with the DOM elements being deleted; when creating elements with innerHTML, especially on page load, the event handlers are not yet bound to the element, and that's what I think is happening here, since link is a special tag, in terms of events, because the page needs to start downloading the stylesheet once the link tag has been added to the DOM, and it needs to update itself once the loading finishes, and since there are no event handlers to tell it that, the page does nothing.

So, even though innerHTML works perfectly in most browsers, it’s not a part of the W3C standard, and it's better to add these special tags with standard DOM methods (createElement, appendChild etc.)

I'm not an IE user, and I cannot list all the elements that have issues with being created using innerHTML, but I know that I had issues in IE8 with google's excanvas.js not being able to attach itself to dynamically created canvas elements, and that I needed to re-create all canvas elements that were created with jQuery (and therefore innerHTML) and re-create them with standard DOM createElement method.

It is funny, since Internet Explorer was the first browser to have innerHTML (as Microsoft invented this property), and it is also the browser which doesn't implement it properly.