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...

Answer 1

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);
}