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.
- If you want to modify the contents of a
<textarea>you need to modify the
valueproperty. If you try using the more generic
innerHTMLproperty instead then some browsers (e.g. Internet Explorer) seem quite happy to let you do that whereas others (e.g. Firefox) aren't.
- 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
<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
<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"?>/ito 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).
According to my shiny new book, innerHTML is a proprietary Micro$oft invention which Firefox seems to have adopted. Ironically it's better supported than some of the W3C recommended properties. There are apparently several tags that according to MS have read-only properties with respect to innerHTML, including and . Check out ajaxian.com/archives/innerhtml-gotchas
You can follow these posts on Twitter at @Wibblings