innerhtml not working in Javascript

Question

I want to insert values into a table using Javascript. It adds row and the required cells, and also an element i want to add, but the cell into which I want to insert a value through .innerHTML remains empty.

Here is my code.

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name="chkbox[]";
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        cell2.innerHTML = rowCount + 1;

        var cell3 = row.insertCell(2);
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name = "txtbox[]";
        cell3.appendChild(element2);

cell2 remains empty...what's wrong with it?

I expect 'cell2' to contain text or an integer value, and I've tried it in firefox and google chrome. — Amjad khan
– Amjad khan, Commented Jan 26, 2013 at 19:42

Justin Morgan · Accepted Answer · 2013-01-26 19:44:12Z

2

Nothing. It works fine:

http://jsfiddle.net/jmorgan123/vB8PN/

I tested it in Chrome and FF on Windows 7 and both worked.

Are you sure you're setting tableID beforehand?
If cell1 and cell3 are getting set, is there a preexisting row in your table with fewer than 3 columns? That could cause odd behavior.
The only other possibility I can think of - and it's unlikely - is that maybe cell2 is already defined somewhere. That shouldn't make a difference (the variable should just get reassigned) but I don't know what browser you're using, so maybe there's a bug in it. It could be choking on that, even though it shouldn't.

edited Jan 26, 2013 at 19:44

answered Jan 26, 2013 at 19:36

Justin Morgan

30.7k13 gold badges82 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amjad khan Over a year ago

yea I am sure i am setting it. i am uisng tbl_records as the id.

Robin van Baalen Over a year ago

@Amjadkhan what browser (and -version) are you using?

Robin van Baalen · Accepted Answer · 2013-01-26 20:21:56Z

This is a weird issue indeed. As most of the answers already stated; it's working just fine in the well known modern browsers.

Since you already said that you're using Firefox and Chrome, it should be working fine in your browsers as well (did you update to the latest and greatest versions, or are you maybe using a beta version?

The only thing I could find is the reference on Quirksmode.org: http://www.quirksmode.org/dom/w3c_html.html

It states that innerHTML is 'almost' supported in IE5-9. But this is the most interesting part I found there:

In IE and Konqueror innerHTML does not work correctly when you update tables. Solve this by using pure DOM methods instead. See this explanation of the behaviour by innerHTML’s inventor.

That could be related to your issue as well, since you're trying to manipulate a table with innerHTML. Maybe you should check out that explanation they linked to and see if it works for your situation.

Collectives™ on Stack Overflow

innerhtml not working in Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related