Loadin CSS dynamically - jQuery vs plain Javascript

Question

I am loading a CSS file into java script code. At first I used jQuery code. It worked fine, but after a while I realized that CSS rules do not apply in IE browser. So I googled and replaced it with the version of document.createElement. Now it works smoothly in all browsers. Does anyone know why? Is there a difference in these 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);

against.

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ł

PS Another tip:

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

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

the file with the first $ -th approach is loaded, while document.getElement is used .... 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]);

work.

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

It 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 is not:

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

Answer 1

jQuery, (, createDocumentFragment), innerHTML / , / .

innerHTML, W3C, , .

, HTML , , ; , DOM; innerHTML, , , , , , , link - , , link DOM, , , .

, innerHTML , W3C DOM (createElement, appendChild ..)

IE, , innerHTML, , IE8 google excanvas.js, canvas, canvas , jQuery (, , innerHTML), DOM createElement.

, Internet Explorer , innerHTML ( Microsoft ), , .

Answer 2

- IE attr link. :

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