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

Its an another form of the previous question.. – Feb 02 '12 at 09:42 — , Feb 02 '12 at 09:42

Rob W · Answer 1 · 2012-02-02T10:45:18.843

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
}

Actually I need to insert a table into this column as inner html.. So what I am looking is a way to execute a set of tags together.... I tried this methode, but that will make the solution bit complicated.... — , Feb 02 '12 at 10:24
@sarin You *can* create `` elements using the `innerHTML` property. Add `
...
..
` to the `cells` property, see http://jsfiddle.net/VLjhW/1/ . — Rob W, Feb 02 '12 at 10:26
I tried the example in that link, But it is showing the exception table is null(alert) — , Feb 06 '12 at 05:15

score 1 · Answer 2 · answered Feb 02 '12 at 09:54

1

As I commented on your other, related question: IDs on elements need to be unique. It's possible that Internet Explorer is refusing to set the innerHTML because you'd end up with DOM elements with IDs that aren't unique, whereas Firefox and Chrome aren't being quite so restrictive.

answered Feb 02 '12 at 09:54

Anthony Grist

38,173
8
62
76

1

Where do you see a duplicate `id="table1"` or `name="table1"` in the provided code? I have set up a demo, and the error shows up too: `innerHTML` is read-only for several elements including ``, in IE. – Rob W Feb 02 '12 at 09:56
@RobW The HTML he's attempting to set as the innerHTML of the row contains elements with `id` attributes that aren't dynamic (`input` with id `type8` and `textarea` with id `textarea2`) and match the row that exists in the original HTML, so attempts to add rows will result in elements with the same ID. However, it would appear that's not the problem. – Anthony Grist Feb 02 '12 at 10:06
That's true, but not the cause of the problems. – Rob W Feb 02 '12 at 10:07
I tried the same code after removing the id and name of textbox and text area.. But still shows error.. – Feb 02 '12 at 10:25
@sarin See Rob W's answer, it explains why you're getting the error. I'd also recommend looking into a Javascript framework such as [jQuery](http://jquery.com/) if you're going to be adding a lot of elements to your pages dynamically. – Anthony Grist Feb 02 '12 at 10:27
Oki... But is ther any way to convert this java script into j querry... I am just a beginer thats why.. – Feb 02 '12 at 10:32

score 1 · Answer 3 · answered Feb 02 '12 at 10:01

1

You can try creating a div in the row and try setting this HTML to div's HTML. So if the div with unique id can be created then you can easily update its content by changing its innerHTML.

answered Feb 02 '12 at 10:01

Amit

379
5
15

1

I tried to create div in columns and in that tried to add html.. but still the same error – Feb 02 '12 at 10:29

Oybek · Answer 4 · 2012-02-06T09:46:14.363

1

Never ever! Never use this kind of approach. This is very incorrect to concat a string and append as innerHTML. The better way is to use the native JavaScript DOM api for dom manipulation.

Here the example of a working fiddle.

EDIT

I've tested it in IE9 but it should work in other IE versions too. The reason you cannot do it is that XHTML specification prohibit modifying the innerHTML property of certain tags. One of them is select tag. You cannot modify the internal options with innerHTML. As I see this is applicable to table either.

Starting here, this is a very good point to refer to some library that has established itself as reliable dom manipulator. For example jQuery.

If you want something to be done well, do it using jQuery.

edited Feb 06 '12 at 09:46

answered Feb 03 '12 at 12:42

Oybek

7,016
5
29
49

2

You may not be familiar with these methods, but they *are* actually "native" JavaScript methods. Using `.innerHTML` is [much faster](http://www.quirksmode.org/dom/innerhtml.html) (run-time speed and coding speed) than several `document.createTextNode`, etc. calls. Also, I cannot find any reference to back up your statement regarding [XHTML](http://www.w3.org/TR/xhtml2/), not even in the [HTML5 spec](http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0). – Rob W Feb 03 '12 at 13:51
1

@RobW Sorry about XHTML Specification. I was a little wrong. However `innerHTML` IS slower than `createElement` or `createTextNode`. By the way there is a very good [post about our current issue](http://stackoverflow.com/questions/737307/javascript-is-it-better-to-use-innerhtml-or-lots-of-createelement-calls-to-ad). – Oybek Feb 03 '12 at 14:31
1

@Oybek Thanks for that code, It is working fine, but I am still confused how can I convert tht code to my function.. – Feb 06 '12 at 05:33

score 1 · Answer 5 · answered Feb 18 '12 at 13:23

1

For IE while creating a table dynamically u must always create a table row

document.createElement('tr');

Had de same issue once. It got solved once i added this

answered Feb 18 '12 at 13:23

DragonPrince

61
7

score 1 · Answer 6 · answered Feb 20 '12 at 09:43

try this. It should works. I tested in both IE and Firefox:

function addrow(tableID) {

            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount - 1);
            var td1 = document.createElement("TD");
            td1.innerHTML = "<h4>Type &nbsp;&nbsp;&nbsp;</h4>";
            var td2 = document.createElement("TD");
            td2.innerHTML='<input type="text" name="type7" id="type8" size="30"/>';
            var td3 = document.createElement("TD");
            td3.innerHTML = '<h4>Description &nbsp;&nbsp;&nbsp;</h4>';
            var td4 = document.createElement("TD");
            td4.innerHTML = '<textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea>';
            row.appendChild(td1);
            row.appendChild(td2);
            row.appendChild(td3);
            row.appendChild(td4);
    }

Thanks for responds, I am looking for a code through which I could insert a table dynamically. — , Feb 20 '12 at 10:33

Sarin Jacob Sunny · Accepted Answer · 2012-02-21T07:19:58.433

I have created a script through which you can add inner tables into a column of the table.

I have used the concepts of @DragonPrince and @Bui Cuong for devoloping my answer.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script language="javascript">

function addtabletesting(tableID) {   


var table1 = document.getElementById(tableID);         
var rowCount1 = table1.rows.length;         
var row1 = table1.insertRow(rowCount1-1); 
var td1 = document.createElement("TD");  

/*
 creating a new row row1 andadded a column td1
*/

var table2= document.createElement("TABLE");
var rowCount2 = table2.rows.length;         
var row2 = table2.insertRow(rowCount2); 
var td2 = document.createElement("TD"); 

/*
Created a new table table2 added row2 and td2. 
*/
td2.innerHTML = "<h4>my new column in new inner table </h4>";  

row1.appendChild(td1); 
td1.appendChild(table2); 
row2.appendChild(td2); 
/*
Added td1 into row1, table2 into td1, and td2  into row2.
*/

} 

</script>

</head>
<body>


<table id="testtable1" border="1">
<tr><td width="150">old table row 1 column 1</td></tr>
<tr><td>old table row 2 column 1</td></tr>

<tr><td> <a  onclick="addtabletesting('testtable1')" >Add table</a> </td></tr>
</table>

</body>
</html>

Check it. Currently its just simply adding a inner table only. You can modify it so that you will be able to make it as you want.

Check the following detailed answer.

Body part

<body>      



<br/>



    <a onclick="show_prompt()" >Add Multiple Companies</a> 


<br/>




<table border="0"  align="left" class="totalbodycontainer">     <%-- table in which entire body content is written  --%>
  <tr>
    <td class="totalbodycontainer">
<div class="boxdiv" align="center"  >       


<div  class="formmainheader" >  <h2 >Add  Company</h2> </div>   
<form action="registration"  >



<table id="sarinaddrow" border="0" align="center"><tr><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="table1" 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 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>Product 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><a  onclick="addproduct('table1')">Add product</a></h6></td>
      </tr>

    </table>  



</td></tr> </table>

</td></tr>

<tr> <td  class="formlabel"><h6 ><a onclick="addcompany('sarinaddrow',1)">Add Company</a></h6></td></tr> </table>

  &nbsp;
</form>
<p></p>
</div></td></tr></table>
</body>

Scripts

<script language="javascript">

var sarintableno=1;
function addpolicy(tableID) {
    try{
        var mystring=null;

        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row1 = table.insertRow(rowCount-1);

            var td1 = document.createElement("TD"); //td1
            td1.className="formlabel";
            td1.innerHTML='<h4>Product Type &nbsp;&nbsp;&nbsp;</h4>';
            row1.appendChild(td1);

            var td2 = document.createElement("TD"); //td2
            td2.className="formfield";
            mystring='<input type="text" name="type7" id="type8" size="30"/>';
            td2.innerHTML=mystring;
            row1.appendChild(td2);

            var td3 = document.createElement("TD"); //td3
            td3.className="formgap";
            row1.appendChild(td3);

            var td4 = document.createElement("TD"); //td4
            td4.className="formlabel";
            td4.innerHTML='<h4>Description &nbsp;&nbsp;&nbsp;</h4>';
            row1.appendChild(td4); 

            var td5 = document.createElement("TD"); //td5
            td5.className="formfield";
            mystring='<textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea>';
            td5.innerHTML=mystring;
            row1.appendChild(td5);
    }catch(e) {

    alert(e);
    }
}

function addcompany(tableID,companyno) {
    try{
        var xxx=0; var mytext1=null;
    for( xxx=0;xxx<companyno;xxx++ ){
        sarintableno++;

        var table1 = document.getElementById(tableID);     // t1    
        var rowCount1 = table1.rows.length;         
        var row1 = table1.insertRow(rowCount1-1); //add tr1
        var td1 = document.createElement("TD");  //add td1
        row1.appendChild(td1); 


        var table2= document.createElement("TABLE");//t2
        td1.appendChild(table2); 

            var rowCount2 = table2.rows.length;       
            var row2 = table2.insertRow(rowCount2); //tr2  
            var td2 = document.createElement("TD"); //td2
            row2.appendChild(td2); 

            rowCount2 = table2.rows.length;       
            var row3 = table2.insertRow(rowCount2); //tr3  
            var td3 = document.createElement("TD"); //td3
            row3.appendChild(td3); 

            var table3= document.createElement("TABLE");//t3
            td3.appendChild(table3);

                var rowCount3 = table3.rows.length;       
                var row4 = table3.insertRow(rowCount3); //tr4 
                var td4 = document.createElement("TD"); //td4
                row4.appendChild(td4); 
                var td5 = document.createElement("TD"); //td5
                row4.appendChild(td5); 
                var td6 = document.createElement("TD"); //td6
                row4.appendChild(td6);
                var td7 = document.createElement("TD"); //td7
                row4.appendChild(td7);
                var td8 = document.createElement("TD"); //td8
                row4.appendChild(td8); 

                var rowCount3 = table3.rows.length;       
                var row5 = table3.insertRow(rowCount3); //tr5 
                var td9 = document.createElement("TD"); //td9
                row5.appendChild(td9); 
                var td10 = document.createElement("TD"); //td10
                row5.appendChild(td10); 
                var td11 = document.createElement("TD"); //td11
                row5.appendChild(td11); 
                var td12 = document.createElement("TD"); //td12
                row5.appendChild(td12); 
                var td13 = document.createElement("TD"); //td13
                row5.appendChild(td13); 

                var rowCount3 = table3.rows.length;       
                var row6 = table3.insertRow(rowCount3); //tr6 
                var td14 = document.createElement("TD"); //td14
                row6.appendChild(td14); 
                var td15 = document.createElement("TD"); //td15
                row6.appendChild(td15);
                var td16 = document.createElement("TD"); //td16
                row6.appendChild(td16);
                var td17 = document.createElement("TD"); //td17
                row6.appendChild(td17);
                var td18 = document.createElement("TD"); //td18
                row6.appendChild(td18);

                var rowCount3 = table3.rows.length;       
                var row7 = table3.insertRow(rowCount3); //tr7 
                var td19 = document.createElement("TD"); //td19
                row7.appendChild(td19);
                var td20 = document.createElement("TD"); //td20
                row7.appendChild(td20);
                var td21 = document.createElement("TD"); //td21
                row7.appendChild(td21);
                var td22 = document.createElement("TD"); //td22
                row7.appendChild(td22);
                var td23 = document.createElement("TD"); //td23
                row7.appendChild(td23);

                var rowCount3 = table3.rows.length;       
                var row8 = table3.insertRow(rowCount3); //tr7 
                var td24 = document.createElement("TD"); //td24
                row8.appendChild(td24);
                var td25 = document.createElement("TD"); //td25
                row8.appendChild(td25);
                var td26 = document.createElement("TD"); //td26
                row8.appendChild(td26);
                var td27 = document.createElement("TD"); //td27
                row8.appendChild(td27);
                var td28 = document.createElement("TD"); //td28
                row8.appendChild(td28);

                var rowCount3 = table3.rows.length;       
                var row9 = table3.insertRow(rowCount3); //tr7 
                var td29 = document.createElement("TD"); //td24
                row9.appendChild(td29);
                var td30 = document.createElement("TD"); //td25
                row9.appendChild(td30);
                var td31 = document.createElement("TD"); //td26
                row8.appendChild(td31);
                var td32 = document.createElement("TD"); //td27
                row9.appendChild(td32);
                var td33 = document.createElement("TD"); //td28
                row9.appendChild(td33);

    /* styles and inner htmls */
    table2.className="tableborder";
    table2.setAttribute("width","200");
    table2.setAttribute("border","1");
    table2.setAttribute("allign","center");

        row2.className="rowdiv";
            td2.className="formheader";
            td2.setAttribute("width","799");
            td2.innerHTML="<h4>Comany Details</h4>";

            td3.setAttribute("width","799");

                table3.setAttribute("width","792");
                table3.setAttribute("border","0");
                table3.setAttribute("id","table"+sarintableno);

                    row4.className="rowdiv";

                        td4.className="formlabel";
                        td4.setAttribute("width","170");
                        td4.innerHTML="<h4>Company ID&nbsp;&nbsp;&nbsp;</h4>";

                        td5.className="formfield";
                        td5.setAttribute("width","205");
                        td5.innerHTML="&nbsp;";

                        td6.className="formgap";
                        td6.setAttribute("width","20");

                        td7.className="formlabel";
                        td7.setAttribute("width","170");
                        td7.innerHTML="<h4>Company Name &nbsp;&nbsp;&nbsp;</h4>";

                        td8.className="formfield";
                        td8.setAttribute("width","205");
                        td8.innerHTML='<input type="text" name="type" id="type" size="30" />';

                    row5.className="rowdiv";

                        td9.className="formlabel";
                        td9.setAttribute("width","170");
                        td9.innerHTML="<h4>Address &nbsp;&nbsp;&nbsp;</h4>";

                        td10.className="formfield";
                        td10.setAttribute("width","205");
                        td10.innerHTML='<textarea name="textarea" id="textarea" cols="28" rows="2"></textarea>';

                        td11.className="formgap";
                        td11.setAttribute("width","20");

                        td12.className="formlabel";
                        td12.setAttribute("width","170");
                        td12.innerHTML="<h4>Phone Number &nbsp;&nbsp;&nbsp;</h4>";

                        td13.className="formfield";
                        td13.setAttribute("width","205");
                        td13.innerHTML='<h6><input type="text" name="type2" id="type2" size="30"/></h6>';

                    row6.className="rowdiv";

                        td14.className="formlabel";
                        td14.setAttribute("width","170");
                        td14.innerHTML="<h4>Fax Number &nbsp;&nbsp;&nbsp;</h4>";

                        td15.className="formfield";
                        td15.setAttribute("width","205");
                        td15.innerHTML='<input type="text" name="type3" id="type3" size="30"/>';

                        td16.className="formgap";
                        td16.setAttribute("width","20");

                        td17.className="formlabel";
                        td17.setAttribute("width","170");
                        td17.innerHTML="<h4>E Mail &nbsp;&nbsp;&nbsp;</h4>";

                        td18.className="formfield";
                        td18.setAttribute("width","205");
                        td18.innerHTML='<input type="text" name="type5" id="type5" size="30"/>';

                    row7.className="rowdiv";

                        td19.className="formlabel";
                        td19.setAttribute("width","170");
                        td19.innerHTML="<h4>Web Site &nbsp;&nbsp;&nbsp;</h4>";

                        td20.className="formfield";
                        td20.setAttribute("width","205");
                        td20.innerHTML='<input type="text" name="type7" id="type7" size="30"/>';

                        td21.className="formgap";
                        td21.setAttribute("width","20");

                        td22.className="formlabel";
                        td22.setAttribute("width","170");
                        td22.innerHTML="<h4> &nbsp;&nbsp;&nbsp;</h4>";

                        td23.className="formfield";
                        td23.setAttribute("width","205");
                        td23.innerHTML='&nbsp;';

                    row8.className="rowdiv";

                        td24.className="formlabel";
                        td24.setAttribute("width","170");
                        td24.innerHTML="<h4>Product Type &nbsp;&nbsp;&nbsp;</h4>";

                        td25.className="formfield";
                        td25.setAttribute("width","205");
                        td25.innerHTML='<input type="text" name="type7" id="type8" size="30"/>';

                        td26.className="formgap";
                        td26.setAttribute("width","20");

                        td27.className="formlabel";
                        td27.setAttribute("width","170");
                        td27.innerHTML="<h4>Description &nbsp;&nbsp;&nbsp;</h4>";

                        td28.className="formfield";
                        td28.setAttribute("width","205");
                        td28.innerHTML='<textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea>';

                    row9.className="rowdiv";

                        td29.className="formlabel";
                        td29.setAttribute("width","170");
                        td29.innerHTML="&nbsp;";

                        td30.className="formfield";
                        td30.setAttribute("width","205");
                        td30.innerHTML='&nbsp;';

                        td31.className="formgap";
                        td31.setAttribute("width","20");
                        td31.innerHTML="&nbsp;";

                        td32.className="formlabel";
                        td32.setAttribute("width","170");
                        td32.innerHTML="&nbsp;";

                        td33.className="formfield";
                        td33.setAttribute("width","205");
                        mytext1='<h6><a  onclick="addproduct('+"'table"+sarintableno+"'"+');">Add product</a></h6>';
                        td33.innerHTML=mytext1;

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



function show_prompt()
{
var name=prompt("Please enter the number of companies ","2");
if (name!=null && name!="")
  {

    addcompany('sarinaddrow',name);
  }
}


</script>

shareef · Answer 8 · 2013-11-06T08:02:05.610

My problem was it worked in firefox and did not work in IE know am using multipe tables and forms inside each other ...

General solution

Use JQuery it can solve such issues between browsers in my case i faced this error and replaced with the $('#'+loc).html(ddl) line instead of innerHTML and it worked

function buildDDL(){
    if (http_request.readyState == 4)
    {
        var ddl = http_request.responseText;
        ddl = ddl.replace(/[\n]/g, '');
        if(ddl != 'SESSION_EXPIRED'){
            $('#'+loc).html(ddl);
            //document.getElementById(loc).innerHTML = ddl;
        }else{
            location.href = 'errorPage.jsp?status='+ddl;
        }
        http_request = false;
    }
}

If you're wondering about functionality, then jQuery's html() performs the same intended functionality as innerHTML, but it also performs checks for cross-browser compatibility.

For this reason, always use jQuery's html() instead of innerHTML where possible.

Ravindra Gullapalli · Answer 9 · 2012-02-02T09:59:26.703

0

you can use innerText like this

try{
     row.innerHTML =mystring1;
}catch(e){
     row.innerText =mystring1;
     row.style.display='table-row';
}

edited Feb 02 '12 at 09:59

answered Feb 02 '12 at 09:42

Ravindra Gullapalli

9,049
3
48
70

1

If you looked better, you'd see that `mystring1` contains HTML. `innerText` is the IEs equivalent of `textContent`. HTML tags won't be parsed. – Rob W Feb 02 '12 at 09:47
@RobW innerText also can display the HTML. Few browsers which do not support innerHTML will support innerText. – Ravindra Gullapalli Feb 02 '12 at 09:48
@sarin Then you have to use DOM to add cells. - Example is here - http://www.w3schools.com/js/tryit.asp?filename=try_dom_tablerow_insertcell – Ravindra Gullapalli Feb 02 '12 at 09:50
Actually I need to add a new table as inner text.. In such cases this will not work – Feb 02 '12 at 09:54

IE shows run time error for innerHTML

9 Answers9

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

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

Linked