JavaScript Forum

**pealo86** · 05-31-2009, 05:56 AM

Im using this code to hide an element before it is loaded into the DOM, but IE just seems to ignore it!

Code:

var head = document.getElementsByTagName ('head');
head     = head[0];
var css  = document.createTextNode ('#coolText { display:none; }');
var obj  = document.createElement ('style');
obj.type = 'text/css';

obj.appendChild (css);
head.appendChild (obj);

Any ideas why it might not be working?
Thanks.

**pealo86** · 05-31-2009, 10:48 AM

Hmmm I've managed to fix it by changing it to this:

Code:

document.write ('<style type="text/css">#coolText { display:none; }</style>');

Still no clues on why IE didn't like it though.

**wayfarer07** · 09:10 AM

I don't think IE allows you to append style elements to the head. They want you to use their StyleSheet object. Or it could be possible that IE just doesn't allow you to create text nodes to dictate style rules.

Just take the approach of using inline styles instead. Inline styles are universally compatible. The slightly older Opera and Safari don't even allow stylesheet changes.

If you need something to be hidden only if JavaScript is enabled, do something like this:

HTML Code:

<body><!--opening body tag-->
<script type="text/javascript">
document.body.className = (document.body.className)
   ? document.body.className + " enabled"
   : "enabled";
</script>

This adds a class of enabled to the BODY element, but won't remove any class that already is on the body. Then, in your regular stylesheet, you could specify a rule like this:

CSS

Code:

.enabled #coolText {display: none;}

Since the class is added before the rest of the HTML is parsed (the script is right after the opening BODY tag), the special text will be hidden automatically and will never "flicker".