I've encountered problem with inserting TR and TBODY to the table with Insertion.After object using Internet Explorer 6.0.2900.2180. When in Firefox everything works ok (using different part of code), performing following code simply doesn't work with IE:
<script language="JavaScript" type="text/javascript" src="prototype.js"></script>
<table id="t" border="1">
<tbody id="row1">
<tr id="tr1">
<td>aa</td>
</tr>
</tbody>
</table>
<script language="JavaScript">
function rm() {
var child = document.getElementById('row1');
new Insertion.After(child,'<tbody id="row2"><tr><td>22</td></tr></tbody>');
//new Insertion.After(child,'<tr><td>11</td></tr>');
}
</script>
<a href="#" onclick="rm()">test</a>
I've noticed that the author had the same problems as I, inserting separated condition for TBODY and TR element to the IE table in Abstract.Insertion.initialize, but his solutions doesn't work in this case (at least in my environment). The code doing this in prototype.js is below:
..
(if we are in IE and we are inserting TBODY or TR)
this.insertContent(this.contentFromAnonymousTable());
..
contentFromAnonymousTable: function() {
var div = document.createElement('div');
div.innerHTML = '<table><tbody>' + this.content + '</tbody></table>';
return $A(div.childNodes[0].childNodes[0].childNodes);
}
I don't understand exactly why such resolution has been implemented, but I've discovered that IE always inserts TBODY after table element and we are here too far in the childNodes to insert content into the source table. The following code works properly for my test sample, even for TR inserting (commented in the sample):
contentFromAnonymousTable: function() {
var div = document.createElement('div');
div.innerHTML = '<table>' + this.content + '</table>';
return $A(div.childNodes[0].childNodes);
}
Can sombody explain what exactly is happening here? Interested thing is that when we are inserting just TR, and we check the name of the element returned from contentFromAnonymousTable, we get TBODY anyway.
