javascript - IE shows run time error for innerHTML

Question

I have a jsp page in which rows are created dynamically to a table using java script. It is working fine in all the browsers except IE. In IE it is showing the error Unknown run time error..

I have attached the java script function

   function addrow(tableID) {
        try{
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount-1);


        var mystring1='<td class="formlabel"><h4>Type &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td><td class="formgap"></td><td class="formlabel"><h4>Description &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea></td>';

row.innerHTML =mystring1;

    }catch(e) {
        alert(e);
    }
    }

HTML part

<table id="table1" width="792" border="0">

<tr class="rowdiv">
      <td class="formlabel"><h4>Type &nbsp;&nbsp;&nbsp;</h4></td>
      <td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td>
      <td class="formgap"></td>
      <td class="formlabel"><h4>Description &nbsp;&nbsp;&nbsp;</h4></td>
      <td class="formfield"><textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea></td>
      </tr>

      <tr class="rowdiv">
        <td width="170" class="formlabel">&nbsp;</td>
        <td class="formfield">&nbsp;</td>
        <td class="formgap"></td>
        <td class="formlabel">&nbsp;</td>
        <td class="formfield"><h6 onclick="addrow('table1')">Add policy</h6></td>
      </tr>

    </table>

Actually I already tried to add a table into a row using a second function..

var mystring2='<td><table width="200" border="1" class="tableborder" align="center"><tr class="rowdiv"><td width="799" class="formheader" ><h4>Comany Details</h4></td></tr><tr><td width="799"><table id="table'+rowCount+'" width="792" border="0"><tr class="rowdiv"><td width="170" class="formlabel"><h4>Company ID&nbsp;&nbsp;&nbsp;</h4></td><td width="205" class="formfield">&nbsp;</td><td width="20" class="formgap"></td><td width="170" class="formlabel"><h4>Company &nbsp;&nbsp;&nbsp; Name &nbsp;&nbsp;&nbsp;</h4></td><td width="205" class="formfield"><input type="text" name="type" id="type" size="30"/></td></tr><tr class="rowdiv"><td width="170" class="formlabel"><h4>Address &nbsp;&nbsp;&nbsp;</h4></td><td width="205" class="formfield"><textarea name="textarea" id="textarea" cols="28" rows="2"></textarea></td><td width="20" class="formgap"></td><td width="170" class="formlabel"><h4>Phone Number &nbsp;&nbsp;&nbsp;</h4></td><td width="205" class="formfield"><h6><input type="text" name="type2" id="type2" size="30"/></h6></td></tr><tr class="rowdiv"><td width="170" class="formlabel"><h4>Fax Number &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><input type="text" name="type3" id="type3" size="30"/></td><td class="formgap"></td><td width="170" class="formlabel"><h4>E Mail &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><input type="text" name="type5" id="type5" size="30"/></td></tr><tr class="rowdiv"><td class="formlabel"><h4>Web Site &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><input type="text" name="type7" id="type7" size="30"/></td><td class="formgap"></td><td class="formlabel">&nbsp;</td><td class="formfield">&nbsp;</td></tr><tr class="rowdiv"><td class="formlabel"><h4>Type &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td><td class="formgap"></td><td class="formlabel"><h4>Description &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea></td></tr><tr class="rowdiv"><td width="170" class="formlabel">&nbsp;</td><td class="formfield">&nbsp;</td><td class="formgap"></td><td class="formlabel">&nbsp;</td><td class="formfield"><h6 onclick="addrow('+"'table"+rowCount+"'"+')"><a href="#">Add row</a></h6></td></tr></table></td></tr> </table></td>';

All these codes are working in chrome and firefox..

Answer 1

This error shows up, because several elements' innerHTML property, including <tr> are read-only ^[source] (Tested in IE 6-8). To solve this issue, the best way is to use the insertCell method:

An universal "lazy" method: (demo: http://jsfiddle.net/VLjhW/2/)

// Variables mystring2, rowCount and table as defined in the question.
var tmp = document.createElement('div');         // <-- Placeholder
tmp.innerHTML = '<table><tr>' + mystring2 + '</tr></table>';
var row = tmp.firstChild.rows[0];                // <-- Created "real" row

var newrow = table.insertRow(table.rows.length); // <-- New dummy row
newrow.parentNode.replaceChild(row, newrow);     // <-- Replace dummy with real row

---

Another method:

Demo: http://jsfiddle.net/VLjhW/

// Array of innerHTML properties for each cell
var cells = ['<h4>Type &nbsp;&nbsp;&nbsp;</h4>',
             '<input type="text" name="type7" id="type8" size="30"/>',
             '',
             '<h4>Description &nbsp;&nbsp;&nbsp;</h4></td>',
             '<textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea>'];
// Array of `class=` attributes for each cell
var cellClasses = ['formlabel', 'formfield', 'formgap', 'formlabel', 'formfield'];

var table = document.getElementById('t1');     // <-- table
var tr = table.insertRow(table.rows.length-1); // <-- Last row
for (var i=0; i<cells.length; i++) {
    var td = tr.insertCell(i);                 // <-- Insert cell
    td.className = cellClasses[i];             // <-- Set class attribute
    td.innerHTML = cells[i];                   // <-- Set innerHTML
}