HTML DOM: IE failing when inserting html into a tr element
Hi guys. I've been wrestling with a problem with IE's script engine crashing the last couple of hours, and quite frankly, I'm stumped.
I have a page with a table in it, and inside this table I have a 'tbody' element with a couple of 'tr' elements inside it. Now what I need to do is spawn a new 'tr' element, append it to the inside of the 'tbody' element, and spawn a couple of 'td' elements inside the new 'tr' (using innerHTML unfortunately. The 'td' code is generated server-side, and is very complex, so I can't easily spawn is using createElement.)
In Firefox (1.0 and 1.5) this works just fine, but IE's script engine (6.0) crashes when I try it, and Opera (8.02) doesn't produce the correct result. Here's a code snippet that demonstrates the problem:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1252" />
<title>Bug repro</title>
<script type="text/javascript">
function tryIt()
{
var body = document.getElementById("TableBody");
var newRow = document.createElement('tr');
newRow = body.appendChild(newRow);
newRow.innerHTML = "<td>New column 1</td><td>New column 2</td>";
}
</script>
</head>
<body>
<table>
<tbody id="TableBody">
<tr>
<td>Existing column 1</td>
<td>Existing column 2</td>
</tr>
</tbody>
</table>
<div>
<a href="javascript:tryIt()">Try it</a>
</div>
</body>
</html>
Now, is there something fundamentally wrong with what I'm trying to do here, or is this just IE being difficult?
Any help would be most appreciated.
Re: HTML DOM: IE failing when inserting html into a tr element
Just found this... Apparently the 'tr' element's innerHTML property is read-only, so that would explain why it doesn't work. (A descriptive error message, as opposed to a crash, would help considerably with debugging though.) Is there any way of getting around this somehow? I would really like to avoid having to add the 'td' elements to the 'tr' manually, as that would require me to rewrite a lot of stuff i really don't want to touch...
Re: HTML DOM: IE failing when inserting html into a tr element
It wouldn't require that much code. You'd just have to create 2 elements, append the text nodes to them, and append the two td's to the new row:
Code:
var tr1 = document.createElement('tr');
tr1.appendChild(document.createTextNode("New column 1"));
newRow.appendChild(tr1);
Then do the same for tr2 ...
Re: HTML DOM: IE failing when inserting html into a tr element
Yep. The actual javascript code is not really the problem. I have a rather large server-side component generating all the 'td's and associated code, and I would have to throw that around a bit to be able to do it that way.
Anyway, I have gone back to an older version of this component that doesn't use tables for now. I don't really have the time to rewrite it just yet. But thanks for the help none the less!
