Dynamically loading css stylesheet doesn't work on IE

I dynamically load a css stylesheet (with a little help from jQuery) like this:

var head = document.getElementsByTagName('head')[0];
$(document.createElement('link'))
    .attr({ type: 'text/css', href: '../../mz/mz.css', rel: 'stylesheet' })
    .appendTo(head);

This works fine in Firefox and Google Chrome, but not in IE.

Any help? Thanks

Once IE has processed all the styles loaded with the page, the only reliable way to add another stylesheet is with document.createStyleSheet(url)

See the MSDN article on createStyleSheet for a few more details.

url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}

You need to set the href attr last and only after the link elem is appended to the head:

$('<link>')
  .appendTo('head')
  .attr({type : 'text/css', rel : 'stylesheet'})
  .attr('href', '/css/your_css_file.css');

Update

Nowadays the only purpose of IE and Edge is to download Chrome, so I recommend NOT bloating your code with custom support for IE or Edge and rather just ignoring their existence.

This also seems to work in IE:

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = '/includes/style.css';
document.getElementsByTagName('head')[0].appendChild(link);