Question

-1

Can't set innerHTML on tbody in IE

rated 0 times [ 0] [ 1] / answers: 1 / hits: 33340 / 14 Years ago, tue, january 18, 2011, 12:00:00

I have a table like this:

<table>

<thead>

    <tr>

        <th colspan=1>a</th>

        <th colspan=3>b</th>

    </tr>

</thead>

<tbody id=replaceMe>

    <tr>

        <td>data 1</td>

        <td>data 2</td>

        <td>data 3</td>

        <td>data 4</td>

    </tr>

</tbody>

</table>

and a method returns me the following after an ajax request:

<tr>

    <td>data 1 new</td>

    <td>data 2 new</td>

    <td>data 3 new</td>

    <td>data 4 new</td>

</tr>

I want to change the innerHTML like

document.getElementById('replaceMe').innerHTML = data.responseText;

However, it seems that IE can't set innerHTML on <tbody>. Can anyone help me with a simple workaround for this issue?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

yasmeeng

Add To Favorites

Follow

Total Points: 516

Total Questions: 97

Total Answers: 101

Location: South Korea

Member since Fri, Sep 11, 2020

4 Years ago

answered 14 Years ago margaritakristinak · Accepted Answer

That is true, innerHTML on tbody elements is readOnly in IE

The property is read/write for all
objects except the following, for
which it is read-only: COL, COLGROUP,
FRAMESET, HEAD, HTML, STYLE, TABLE,
TBODY, TFOOT, THEAD, TITLE, TR.

source: http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx

You can do something like this to work around it:

function setTBodyInnerHTML(tbody, html) {

  var temp = tbody.ownerDocument.createElement('div');

  temp.innerHTML = '<table>' + html + '</table>';



  tbody.parentNode.replaceChild(temp.firstChild.firstChild, tbody);

}

Basically it creates a temporary node into which you inject a full table. Then it replaces the tbody with the tbody from the injected table. If it proves to be slow, you could make it faster by caching temp instead of creating it each time.