Firefox vs. IE: innerHTML handling

Question

After hours of debugging, it appears to me that in FireFox, the innerHTML of a DOM reflects what is actually in the markup, but in IE, the innerHTML reflects what's in the markup PLUS any changes made by the user or dynamically (i.e. via Javascript).

Has anyone else found this to be true? Any interesting work-arounds to ensure both behave the same way?

Answer 1

I use jQuery's .html() to get a consistent result across browsers.

Answer 2

I agree with Pat. At this point in the game, writing your own code to deal with cross-browser compatibility given the available Javascript frameworks doesn't make a lot of sense. There's a framework for nearly any taste (some really quite tiny) and they've focused on really abstracting out all of the differences between the browsers. They're doing WAY more testing of it than you're likely to.

Something like jQuery or Yahoo's YUI (think how many people hit the Yahoo Javascript in a day and the variety of browsers) is just way more road-tested than any snippet you or I come up with.

Answer 3

Using prototype and the $("thisid") syntax instead of document.getElementById("thisid") might do the trick for you. It worked for me.

Answer 4

using a good library is a great way to get around browser inconsistencies, and jquery is the one that I typically recommend - and if you're running into issues altering the elements in a form in particular, jquery boasts a few really useful plugins focused specifically on form manipulation and evaluation.