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

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

Answer 2

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.

Answer 3

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);
    }