innerHTML bug IE8

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 th开发者_运维知识库e 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

---

You can use innerText in place of innerHTML