prototype.js - Element.insert( Element) ignored under IE 6?

Question

I am using IE 6 (corporate mandated version) on XP, as well as (primarily) Firefox 3. In these, I am making a DHTML table using the prototype.js library version 1.6.0.3.

I have event handler javascript code to add a row to the table, which works fine under Firefox, but is completely ignored under Internet Explorer. I can walk through the code in the MS "script debugger" (yes, I know it's old and deprecated, but it was available), so I know the event is being hooked.

The code is something of the form:

var xTable = $( 'x_list')  // id of x...
var aRow = new Element( 'tr')
aRow.setAttribute( 'id', id)
. . .
var xEl = new Element( 'td')
. . .
aRow.insert( xEl)
. . .
// alert( aRow.inspect() )
// alert( xTable.inspect() )
debugger  // check insert() implementation under IE
xTable.insert( aRow)

Has anybody else had experience with conflicts between Element.insert() and Explorer?

Answer 1

You have to insert new TR elements into a TBODY not directly into TABLE. Otherwise IE won't show/insert/whatever it.

Answer 2

Try creating a <tbody> element inside the <table> you're working with, and then appending to that element instead of the <table>.

That's the first thing I would try. I vaguely remember Javascript manipulation of tables being weird if there was no <tbody> element.

Answer 3

slosd answered it perfectly, just a little addition: The TBODY is required in IE7 as well, but not in IE8.