IE8 appendChild "Unexpected call to method or property access"

Question

I really need some help with this issue I'm having. Only seem to have on IE8. IE7 works fine which is weird. I'm using IE9 (F2) development tool IE8 emulator which seem to work good. I also checked on VMware native IE8 and getting the same results. Anyway is that a issue with appendChild in IE8? How can I solve this issue and is there a jquery or better way of coding this section.

IE report this as the issue ** s.appendChild(document.createTextNode(jcode)); ** "Unexpeced call to method or property access"

for (var i=0; i<showContain.length+1; i++) 
  { 
var s = document.createElement('script');
s.setAttribute('type','text/javascript'); 
var jcode = "$('#showdiv" + i + "').mouseover(function(){$('.showcaseoff').hide(); $('#showcase" + i + "').show()});";
s.appendChild(document.createTextNode(jcode));
document.body.appendChild(s);
}

Thanks...

It's a known bug: http://webbugtrack.blogspot.ro/2009/01/bug-143-createtextnode-doesnt-work-on.html — Sergiu Paraschiv, Sep 19 '13 at 15:43
Why in the world are you appending script to a script tag! Execute the code!!! Yikes. I am glad it is an error, because that is a bad idea. — epascarello, Sep 19 '13 at 15:46
Can't help thinking this seems like a lot of unnecessary work to execute a statement with a particular variable/value. Have you considered [using an closure](http://stackoverflow.com/a/1451043) to keep each value for `i` separate? — Jonathan Lonowski, Sep 19 '13 at 15:48
Hey I'm kind of doing code cleaning for somebody else old code and yes it full under my plate unfortunately :) Also I'm here for solution not criticism (epascarello) Anyway, How can I rearrange this to work? — ifelse, Sep 19 '13 at 15:55
Sergiu Paraschiv good info but how would I use script tag instead of styleTag and do I need the script tag. Can this be done simply in Jquery? — ifelse, Sep 19 '13 at 16:04

Jonathan Lonowski · Accepted Answer · 2013-09-19T16:21:17.657

This does seem to simply be a limitation in some versions of IE. But, you seem open to alternatives:

How can I rearrange this to work?

I'm guessing this snippet came from frustration that i seemed to change value for the .show() towards the end. That would be due to JavaScript's current lack of block-level scoping and mixing in the asynchronous nature of .mouseover(), so it would reference i after the loop had already run to completion and incremented it to showContain.length+1.

Eventually, you'll be able to use let in place of var to create a block-level i within the loop (the keyword is part of the upcoming ECMAScript 6 standard). But, you can currently use a closure to isolate each value of i in its own function scope.

function eachShowcase(i) {
    $('#showdiv' + i).mouseover(function(){
        $('.showcaseoff').hide();
        $('#showcase' + i).show()
    });
}

for (var i=0; i<showContain.length+1; i++) {
    eachShowcase(i);
}

Yes Yes it works!! Just had to refactor the quotes for (i) $('#showdiv' + i + '') but start working from that point. Edit $('#showcase' + i) Thanks Jonathan Lonowski — ifelse, Sep 19 '13 at 18:08

IE8 appendChild "Unexpected call to method or property access"

1 Answers1