Can not change innerHTML of a table via Javascript to add rows

Question

In my application I am using Javascript to call a VB side function via PageMethods. When the onSuccess function is hit, I am attempting to add the returned string into the inner html of a table. Listed below is the Javascript I am trying to use to do this, but I keep getting a:

"Microsoft JScript runtime error: Unknown runtime error"

Below is the table (I would like to keep this how it currently is if possible, this was already in place when I inherited this project).

            <asp:Table id="tblResults" Runat="server" CssClass="detailTable" CellSpacing="0" CellPadding="4"
                Width="100%">
                <asp:TableRow CssClass="detailRow">
                    <asp:TableCell Width="1%">&nbsp;</asp:TableCell>
                    <asp:TableCell Width="10%">
                        <b>ID</b></asp:TableCell>
                    <asp:TableCell>
                        <b>Title</b></asp:TableCell>
                    <asp:TableCell>
                        <b>Manager</b></asp:TableCell>
                    <asp:TableCell>
                        <b>Start Date</b></asp:TableCell>
                    <asp:TableCell>
                        <b>End Date</b></asp:TableCell>
                    <asp:TableCell>
                        <b>Status</b></asp:TableCell>
                </asp:TableRow>
            </asp:Table>

The innerHTML of the table when the JS function is called:

<TBODY>
<TD style="WIDTH:1%">&nbsp;</TD>
<TD style="WIDTH:10%"><B>ID</B></TD>
<TD><B>Title</B></TD>
<TD><B>Manager</B></TD>
<TD><B>Start Date</B></TD>
<TD><B>End Date</B></TD>
<TD><B>Status</B></TD></TR></TBODY>

And here is the javascript of the success function - What I did was I cut off the /TBODY ending of the innerHTML, want to add in the return string (text that contains html for other rows of the table) - then add /TBODY back to close the table:

function saveSuccess(c) {
var oldInner = document.getElementById('tblResults').innerHTML;
var index = oldInner.indexOf("</TBODY>");
oldInner = oldInner.slice(0, index);
document.getElementById('tblResults').innerHTML = oldInner + c + '</TBODY>';
}

can anyone see why I am getting this error and why the table is not updating to show the returned html?

Answer 1

From MSDN:

The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

You have to rebuild the whole table, or else use DOM APIs to modify/add content.