prototype update() not working in IE

as the title suggests i have problem with prototype's update function in all IE version but its working in FF and chrome

this doesnt work

var element = $('mainnav_h');
element.cleanWhitespace();
var html = element.firstChild.innerHTML;
html = html.gsub('<span class="sep"></span>', '');
element.firstChild.update(html);//this doesn't word

but this works

var element = $('mainnav_h');
element.cleanWhitespace();
var html = element.firstChild.innerHTML;
html = html.gsub('<span c开发者_如何学运维lass="sep"></span>', '');
element.firstChild.update("this works");

source

<div class="innerNavigation_horizontal clear">
    <ul id="mainnav_h">
        <li><span class="sep"></span><a href="#" title="#">items</a></li>
    </ul></div>

you can see clearly when i pass variable to update() function is doesn't work in IE where as when i pass string in to it it works in IE, can some one explain this absurd IE behaviour

salman

My guess is that the problem is not with update(), but with one of the preceding functions that work on the HTML.

Can you do a test output of html using alert() at every stage of the script? Does it contain anything in the first place?

What does #mainnav_h look like? Can you post source?

Does element.firstChild actually exist? Can you check using

alert(typeof element.firstChild);

Do you get any error messages in IE?

In this case, the problem was obviously related to HTML casing/syntax, but for other Googlers arriving here, I can recommend disabling IE Compatibility Mode. I could easily recreate the problem in the IE-console (F12) by executing:

Document Mode IE7 standards:

>> span = document.createElement("span");
[object] {
    nextSibling : ,
    onresizeend : null,
    onrowenter : null,
    aria-haspopup : "",
    childNodes : [object],
    ondragleave : null,
    oncut : null,
    clientHeight : 0,
    onbeforepaste : null,
    ondragover : null
    ...
} 
>> span.update() 
"Object doesn't support property or method 'update'"

Document Mode IE9 standards:

>> span = document.createElement("span"); 
[object] {
    nextSibling : ,
    onresizeend : null,
    onrowenter : null,
    aria-haspopup : "",
    childNodes : [object],
    ondragleave : null,
    oncut : null,
    clientHeight : 0,
    onbeforepaste : null,
    ondragover : null
    ...
} 
>> span.update()
[object] {
    nextSibling : ,
    onresizeend : null,
    onrowenter : null,
    aria-haspopup : "",
    childNodes : [object],
    ondragleave : null,
    oncut : null,
    clientHeight : 0,
    onbeforepaste : null,
    ondragover : null
    ...
}

This will, of course, only work when running the console on a site that has loaded the prototype framework, e.g. www.redmine.org.