Javascript problems with Internet Explorer

Question

I'm having rows,for which i need to append controls dynamically. code for it is as follows

<script type="text/javascript">
function AddRowContent()
{
    //Here trRow is a id of row for which I need to append the data.
    var d=document.getElementById("trRow");
    d.innerHTML="<td>Aliases</td>";     
}
</script>

Code is working fine with other browsers, but it's not working properly with Internet Explorer. Please Let me know solution or better way to do this.

Answer 1

In IE, innerHTML on tr elements is readOnly.

Solution:

var d=document.getElementById("trRow");
var td = document.createElement('td');
td.innerHTML = "Aliases";
d.appendChild(td);

Answer 2

Yes, innerHTML property is readonly for <tr> element in IE, as MSDN described:

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

You can change the value of the title element using the document.title property.

To change the contents of the table, tFoot, tHead, and tr elements, use the table object model described in Building Tables Dynamically . However, to change the content of a particular cell, you can use innerHTML.

So to manipulate your table, try read Building Tables Dynamically and find a solution, for your simple case, use DOM API could be a compatible solution:

var td = document.createElement('td');
td.innerHTML = 'Aliases';
// Remove all existing <td> element
while (d.firstChild) {
    d.removeChild(d.firstChild);
}
d.appendChild(td);

Answer 3

var firstRow=document.getElementById("myTable").rows[0];
var x=firstRow.insertCell(-1);
x.innerHTML="New cell"