Connecting Tech Pros Worldwide Help | Site Map

appendChild not working in IE6

 
LinkBack Thread Tools Search this Thread
  #1  
Old July 24th, 2005, 12:35 PM
Robi
Guest
 
Posts: n/a
Default appendChild not working in IE6

I have the following code:

##############
var nHead=(document.getElementsByTagName)?document.get ElementsByTagName("head").item(0):document.head;
var nStyle=document.createElement("style");
// nStyle.type="text/css";
nStyle.setAttribute("type","text/css");
nHead.appendChild(nStyle);
var cssText=document.createTextNode(
'\r\t.class1 { font-family: Verdana, sans-serif; font-size:1; color:#ffff00; font-weight: bold;} '+
'\r\t.class2 { font-family: Verdana, sans-serif; font-size:1; color:#00ffff; font-weight: bold;} '+
'\r\t.class3 { font-family:Arial,sans-serif;font-size:3;color:#00ff00;font-weight: bold;} '+
'\r\t.class4 { font-family:Arial,sans-serif;font-size:3;color:#0000ff;font-weight: bold;} '+
'\r\t.class5 { font-family:Arial,sans-serif;font-size:3;color:#ff0000;font-weight: bold;} \r'
);

nStyle.appendChild(cssText);
##############

this last nStyle.appendChild(cssText); returns the following error in IE6:
Error: Unexpected call to method or property access.
Code: 0

in FF this seems to work

Can anybody point out the problem?

  #2  
Old July 24th, 2005, 12:55 PM
Christopher J. Hahn
Guest
 
Posts: n/a
Default Re: appendChild not working in IE6

Robi wrote:[color=blue]
> I have the following code:
>
> ##############
> var nHead=(document.getElementsByTagName)?document.get ElementsByTagName("head").item(0):document.head;
> var nStyle=document.createElement("style");
> // nStyle.type="text/css";
> nStyle.setAttribute("type","text/css");
> nHead.appendChild(nStyle);[/color]

Try this:

nstyle.cssText =
'\r\t.class1 { font-family: Verdana, sans-serif; font-size:1;
color:#ffff00; font-weight: bold;} '+
'\r\t.class2 { font-family: Verdana, sans-serif; font-size:1;
color:#00ffff; font-weight: bold;} '+
'\r\t.class3 {
font-family:Arial,sans-serif;font-size:3;color:#00ff00;font-weight:
bold;} '+
'\r\t.class4 {
font-family:Arial,sans-serif;font-size:3;color:#0000ff;font-weight:
bold;} '+
'\r\t.class5 {
font-family:Arial,sans-serif;font-size:3;color:#ff0000;font-weight:
bold;} \r';

##############[color=blue]
>
> this last nStyle.appendChild(cssText); returns the following error in IE6:
> Error: Unexpected call to method or property access.
> Code: 0
>
> in FF this seems to work
>
> Can anybody point out the problem?[/color]

Not sure about cross-compatibility of cssText, or applicable standards.
Others here are more qualified to speak to those issues.

  #3  
Old July 24th, 2005, 01:05 PM
Martin Honnen
Guest
 
Posts: n/a
Default Re: appendChild not working in IE6



Robi wrote:

[color=blue]
> var nStyle=document.createElement("style");
> // nStyle.type="text/css";
> nStyle.setAttribute("type","text/css");
> nHead.appendChild(nStyle);
> var cssText=document.createTextNode(
> '\r\t.class1 { font-family: Verdana, sans-serif; font-size:1; color:#ffff00; font-weight: bold;} '+
> '\r\t.class2 { font-family: Verdana, sans-serif; font-size:1; color:#00ffff; font-weight: bold;} '+
> '\r\t.class3 { font-family:Arial,sans-serif;font-size:3;color:#00ff00;font-weight: bold;} '+
> '\r\t.class4 { font-family:Arial,sans-serif;font-size:3;color:#0000ff;font-weight: bold;} '+
> '\r\t.class5 { font-family:Arial,sans-serif;font-size:3;color:#ff0000;font-weight: bold;} \r'
> );
>
> nStyle.appendChild(cssText);
>
> this last nStyle.appendChild(cssText); returns the following error in IE6:
> Error: Unexpected call to method or property access.
> Code: 0[/color]

Known problem with IE, IE 4 started with its own object model and while
IE 5 and later are supposed to implement the W3C DOM unfortunately there
are some elements on which full core DOM support is not there so that
for instance appendChild does not work, script and style elements are
examples of that. It is mostly elements where IE already has/had its own
specialized API to construct the contents of the element, for instance
the contents of the style element is a (CSS) stylesheet and IE has its
own API to add rules to such a sheet.
So some way to add a style rule with IE/Win and with Mozilla and with
Opera 8 is

var style = document.createElement('style');
style.type = 'text/css';
var selector = 'html';
var properties = 'color: darkblue; background-color: lightblue';
document.getElementsByTagName('head').item(0).appe ndChild(style);
if (document.styleSheets) {
var lastSheet = document.styleSheets[document.styleSheets.length - 1];
if (lastSheet && typeof lastSheet.addRule != 'undefined') {
lastSheet.addRule(selector, properties);
}
else {
style.appendChild(document.createTextNode(selector + ' { ' +
properties + ' }'));
}
}
else {
style.appendChild(document.createTextNode(selector + ' { ' +
properties + ' }'));
}

Or you could use try/catch to catch the IE error and then script the IE way.

--

Martin Honnen
http://JavaScript.FAQTs.com/
  #4  
Old July 24th, 2005, 08:05 PM
ASM
Guest
 
Posts: n/a
Default Re: appendChild not working in IE6

Robi wrote:[color=blue]
> I have the following code:
>
> ##############
> var nHead=(document.getElementsByTagName)?document.get ElementsByTagName("head").item(0):document.head;
> var nStyle=document.createElement("style");
> // nStyle.type="text/css";
> nStyle.setAttribute("type","text/css");[/color]

personaly, my IE (5.1 5.2 Mac)
is angry with 'type' in wahtever way I try to pass it

nStyle.setAttribute("type","text/css");
MyObj.type = "text/css"

have to innerHTML the complete tag ?

[color=blue]
> nHead.appendChild(nStyle);
> var cssText=document.createTextNode(
> '\r\t.class1 { font-family: Verdana, sans-serif; font-size:1; color:#ffff00; font-weight: bold;} '+
> '\r\t.class2 { font-family: Verdana, sans-serif; font-size:1; color:#00ffff; font-weight: bold;} '+
> '\r\t.class3 { font-family:Arial,sans-serif;font-size:3;color:#00ff00;font-weight: bold;} '+
> '\r\t.class4 { font-family:Arial,sans-serif;font-size:3;color:#0000ff;font-weight: bold;} '+
> '\r\t.class5 { font-family:Arial,sans-serif;font-size:3;color:#ff0000;font-weight: bold;} \r'
> );
>
> nStyle.appendChild(cssText);
> ##############
>
> this last nStyle.appendChild(cssText); returns the following error in IE6:
> Error: Unexpected call to method or property access.
> Code: 0
>
> in FF this seems to work
>
> Can anybody point out the problem?[/color]


--
Stephane Moriaux et son [moins] vieux Mac
 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 220,989 network members.