Wrestling with JavaScript

I've spent some time today struggling to get some JavaScript code working across multiple browsers. When it comes to JavaScript I really am a hacker in the old sense of the word: self taught and knowing just enough to get by.

Anyway two things caught me out today and I thought I'd document both here both as a reminder to me and in case someone else finds it useful.

1. If you want to modify the contents of a <textarea> you need to modify the value property. If you try using the more generic innerHTML property instead then some browsers (e.g. Internet Explorer) seem quite happy to let you do that whereas others (e.g. Firefox) aren't.

2. Internet Explorer works through its DOM when letting you play with the value of innerHTML. Why does that matter? Well to take one example, if there a <fieldset> tag in the innerHTML of a <div> which enfold the <fieldset> then IE will treat the <fieldset> as upper case even if it's lower case in the source. So doing a case sensitive test on the innerHTML of the <div> using the search string "<fieldset>" doesn't produce any matches. But it does on Firefox for example because Firefox seems to respect the source.
   
   Similarly IE removes some (but not all!) of the quotes around attributes so when searching for what in the source reads <fieldset class="fields2"> you have to use a RegExp of <fieldset class\="?fields2"?>/i to keep all flavours of browsers happy.

The second of these I've got caught out of before so I should have known better, the first I put down to tiredness and repetition (the line above in the code has to use an innerHTML to do the same thing on another chunk of HTML).