HTML DOM: IE failing when inserting html into a tr element

**wien** · December 21st, 2005, 09:22 AM

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.

**wien** · December 21st, 2005, 01:18 PM

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...

**Dr. Script** · December 21st, 2005, 05:27 PM

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 ...

**wien** · December 22nd, 2005, 11:33 AM

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!

Thread: HTML DOM: IE failing when inserting html into a tr element

Thread Tools

Display

HTML DOM: IE failing when inserting html into a tr element

Re: HTML DOM: IE failing when inserting html into a tr element

Re: HTML DOM: IE failing when inserting html into a tr element

Re: HTML DOM: IE failing when inserting html into a tr element

Posting Permissions