How to append Style Sheets in IE using jQuery?

Question

Hello Guys,

I was just trying to create a plugin, and I needed it to be user-friendly so I want to append the <link/> tag on the head portion of the users page as my plugin is loaded. It works fine with all the other browsers (not sure of IE9, IE7 & IE6) but doesn't work for IE8! I don't what is getting wrong with my plugin, so I just created a sample page and faced the similar problem! Here is my test page HTML+jQuery Code ------

<html>
       <head>
              <script src="../jquery-1.6.min.js"></script>
              <script>
                       $(document).ready(function () {
                          $(document.head).append('<link rel="stylesheet" type="text/css" href="style.css" />');
                       });
              </script>
       </head>
       <body>
              <h1>Text!</h1>
       </body>
</html>

And here is my CSS code -----

body {
 background:#ddd; 
}
h1 {
 color: #789; 
}

So can anyone tell me where I'm going wrong or is this the problem of lifetime?

THANKS IN ADVANCE

After seeing the first comment and going to link supplied, I just created this sample code and found something amazing! See this ~~~

<html>
       <head>
              <script src="../jquery-1.6.min.js"></script>
              <script>
                       $(document).ready(function () {
                          if (document.getElementsByTagName('head')[0] === document.head) {
                           $("head").append('<link rel="stylesheet" type="text/css" href="style.css" />');
                          }else {
                           alert('This doesn\'t supports head appending!');
                          }
                       });
              </script>
       </head>
       <body>
              <h1>Text!</h1>
       </body>
</html>

On executing this page with my IE8 browser I get the message that

This doesn't supports head appending!

Well I don't what is wrong with my browser or is this the fault of IE8?

Dupe of: http://stackoverflow.com/questions/1184950/dynamically-loading-css-stylesheet-doesnt-work-on-ie — Chris Moschini, Jun 26 '12 at 00:00

score 27 · Accepted Answer · answered May 21 '11 at 05:31

27

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

answered May 21 '11 at 05:31

Chris Fulstow

41,170
10
86
110

Thanks buddy you rock ~ this works with every browser in the world! Thanks again! – Jack Billy May 21 '11 at 06:19
5

This seems like something that should actually be a part of jquery when attempting to add HTML that includes a link tag in IE < 9. – Chris Moschini Jun 25 '12 at 23:52
I agree, this should be part of jquery. – FiveTools Jun 26 '12 at 18:02
2

I was caught out by the fact that the IE8 compatibility mode in IE9 **does** let you insert a link into the head, but the real IE8 doesn't. So much for 'compatibility'! I agree, this should be in jquery. – frankieandshadow Feb 15 '13 at 00:39

score 5 · Answer 2 · answered May 21 '11 at 05:13

5

You're using document.head to access the head. document.head is only a recent addition to the DOM, as part of HTML5. So, it's not universally supported.

If you want to use it, you should add a shim before calling it:

document.head = document.head || document.getElementsByTagName('head')[0];

Otherwise, you can just append directly to the <head> tag (which is recommended, since that's half the point of using jQuery's syntactic sugar):

$("head").append(...);

answered May 21 '11 at 05:13

Yahel

37,023
22
103
153

I know but it is not working, see my newest Edit to my question. IE8 doesn't supporting appending tags in `head` section!? – Jack Billy May 21 '11 at 05:19
...your alert merely proves that document.head isn't supported, as I said, not that you can't append to the head via JavaScript. If you add the shim, it should work. `document.getElementsByTagName('head')[0]` has universal support. – Yahel May 21 '11 at 05:35
Then how to append `link` tag on it? Please help me out. – Jack Billy May 21 '11 at 05:39
@Jack Billy: If you are OK with vanilla JavaScript, I have a code snippet. But I guess you know how to do it with js. – ace May 21 '11 at 05:52
Please provide everything you got to answer my question ~~ ace – Jack Billy May 21 '11 at 06:18

How to append Style Sheets in IE using jQuery?

2 Answers2

Linked