This innerHTML code wasn't working reliably in IE8: (but was working in IE6 IE7 FF Opera Chrome Safari) (by not working reliably I mean I had placed this code within onmouseover handlers on various elements, sometimes it would change the text when mousing over a given element and sometimes it wouldn't - there was no pattern to this - whether it would work or not seemed to be totally random)
document.getElementById("mydiv").innerHTML="some text";
DOM methods (removing and re-adding the div with updated text) weren't helping either.
So I added this immediately after the above code and it fixed it:
document.styleSheets[0].addRule("#mydiv:after", "content: ' ';");
Using conditional comments I identified this 2nd line of code as for IE8 only
I am positive this will save people a lot of time since I have wasted ages on this!
Even Jquery.text() wasn't helping!
I have read elsewhere that the innerHTML will update the DOM but can fail to update screen elements. I believe the CSS rule works because it changes the content of the after pseudo class of #mydiv dynamically and thus requires the content of mydiv to be updated, thus updating the screen (something innerHTML was failing to do).
However if anyone has a better solution I'd love to hear - Thanks
EDITED AS REQUESTED