innerHTML problems in IE6

[nickknowledge]

I'm having trouble with the .innerHTML property / method on IE6. I want to change the markup for a <tr> (id="flexrow_4")

Even trying a small change such as this (through a bookmarklet button) doesn't work:

javascript:(function(){document.getElementById('flexrow_4').innerHTML = '<td>Due Date</td><td>20050509</td>';})()

Works fine in Firefox 1.0.2

I've read about not trying to change the innerHTML property of an IE6-rendered page until the page is completely loaded. Surely using a bookmarklet is after the page has loaded?

I think I need to use innerHTML because I want to add an "id" tag to the element, like this:

<td>Due Date</td><td id="dueDate">20050509</td>

I'd be very grateful for suggestions, as we're standardized on IE6 at work.

Thanks,

Nick.

[Rambo Tribble]

First, let's see if just cleaning up what you have will work (though many would argue that you should use W3C methods to modify the page's object, rather than innerHTML). Try this:

javascript:document.getElementById('flexrow_4').innerHTML = '<td>Due Date</td><td>20050509</td>';

[kaled]

If the code is embedded in the page, the / characters should be escaped thus :-

innerHTML = '<td>Due Date<\/td><td>20050509<\/td>';

Even if it's in an external file, this is a wise precaution.

Kaled.

[nickknowledge]

Thanks for your help so far. I wasn't having much success with the innerHTML stuff, so I've switched to DOM scripting, and this is as far as I've got on the recode:

Effectively, I'm wanting to change:

<tr valign="top" id="flexrow_4">
<td width="130">Due Date (YYYYMMDD):<span class="TextRequired">*</span></td>
<td>
<input type="text" name="flexFields(fild12497)" size="30" value="" class="inputfield">
</td>
</tr>

To:

<tr valign="top" id="flexrow_4">
<td width="130">Due Date (YYYYMMDD):<span class="TextRequired">*</span></td>
<td>
<input type="text" name="flexFields(fild12497)" size="30" value="" class="inputfield" id="dueDate">&nbsp;<img src="/icons/date_popup.gif" height="16" width="16" align="absmiddle" />
</td>
</tr>

This is the javascript function I'm using:

function nickCal(trname, inputid) 
{
nicktds = document.getElementById(trname).getElementsByTagName('td');
nickinput = nicktds[1].getElementsByTagName('input');
nickinput[0].setAttribute('id', inputid);
nicktext = document.createTextNode(' ');
nicktds[1].appendChild(nicktext);
nickImg = document.createElement('img');
nickImg.setAttribute('src','/icons/date_popup.gif');
nickImg.setAttribute('width', '16');
nickImg.setAttribute('height', '16');
nickImg.setAttribute('align', 'absmiddle');
nicktds[1].appendChild(nickImg);
}
nickCal('flexrow_4','dueDate');

This works just fine in Firefox, and does not error out in IE6. How do I get it working in IE6?

Thanks,

Nick.

[nickknowledge]

(Rather sheepish)

Turned out to be an issue with IE's settings - was set to "never" check for a new page. Setting it to automatic changed it successfully.

Pleased that the DOM stuff worked successfully though, and grateful for the pointers on this forum.