Irksome: Internet Explorer vs. JavaScript

So I’m coding a form and I want the user to be able to add more rows to it, if they wish.

So when the user activates a control, I use JS to create some ‘input’ elements (including some radio buttons), add a few attributes to them, and then insert them in a table cell.
It’s not exactly rocket science, even for a JS |\|00|3 such as myself.

Let me expand on this.

I build in Firefox and test in IE. So I use the following code:

// NB: bits and pieces have been left out for the sake of this example.

// create the cell
var newCell = newRow.insertCell(2);

// create the elements
var newInput1 = document.createElement('input' );		
var newInput2 = document.createElement('input' );
var newLabel1 = document.createElement('label');
var newLabel2 = document.createElement('label');

// set some attributes on those elements
newInput1.setAttribute('type', 'radio');
newInput1.setAttribute('name', 'rdoAddRemove_' + rowIndex);		
newInput1.setAttribute('id', 'rdoAdd_' + rowIndex);
newInput1.setAttribute('value', 'Add');
newInput2.setAttribute('type', 'radio');
newInput2.setAttribute('name', 'rdoAddRemove_' + rowIndex);		
newInput2.setAttribute('id', 'rdoRemove_' + rowIndex);
newInput2.setAttribute('value', 'Remove');
newLabel1.setAttribute('for', 'rdoAdd_' + rowIndex);
newLabel2.setAttribute('for', 'rdoRemove_' + rowIndex);

// append the elements to the cell

So you can see what I’m trying to do here, and so could Firefox, because it built the code correctly.

IE, on the other hand, displayed the radio buttons, but wouldn’t allow the user to select them. After much hair-pulling and fretting, (because I can’t find a Firebug equivalent for IE), I discovered that IE wasn’t adding the ‘name’ attributes to the ‘input’ elements.

Apparently (and I’ve lost the link now) IE has a ‘feature’ that means you can’t change the name of an element once it has been created.

So I tried this:

newInput = document.createElement('<input name="rdoAddRemove_' + rowIndex + '" />' );

Yay! It now works in IE! …but the good browsers spat the dummy. And I really felt that if I were going to do this then I might as well ‘innerHTML’ everything.

So I remembered my good old friend try {...} catch(err) {...} and came up with this:

try {
	// IE will eat this, FF Safari and others will choke on it.
	newInput1 = document.createElement('<input name="rdoAddRemove_' + rowIndex + '" />');
	newInput2 = document.createElement('<input name="rdoAddRemove_' + rowIndex + '" />');
} catch(err) {
	// Good browsers will eat this instead.
	newInput1 = document.createElement('input');		
	newInput2 = document.createElement('input');

Now whether this is the best way to do it or not, I don’t know, but it worked in all the browsers I tested it in so I’m happy(-ish).

GRRRRR @ IE for wasting my afternoon!!

This entry was posted in Coding, JavaScript, User Interface, Web Standards. Bookmark the permalink.

6 Responses to Irksome: Internet Explorer vs. JavaScript

  1. You are the man 🙂

    I will try and see if I can get it working on

    Thanks again!

  2. Dan says:

    Hmmm. Don’t take this as gospel truth – it may still be completely wrong. All I know is that it works 🙂

  3. Pray says:

    This is heaven. You really helped me end the most frustrating moment in my life.

    Thank youuu~ 😀

  4. zirtoc says:

    Awesome. Truly awesome. I have looked at probably 20 other solutions, and this one worked. Microsoft’s official example wouldn’t run in Firefox! This runs in both IE and FF.

  5. Maxim says:

    Hey man, nice work! Do you by any chance know of an IE equivalent for an HTMLTableRowElement’s rowIndex property? This is what I’m doing, and it works with FF:

    var rows = gTableSection.rows;
    var rowAttach = rows.namedItem(“attach”);

    //determine rowIndex
    var rowIndex = rowAttach.rowIndex; // IE starts wining like a pussy here

    var insertedRowRef = gTableSection.insertRow(rowIndex);

    I know I could iterate through all table rows keep track of how many are there, and I’ll have to do that unless there’s a better way of finding an index of a HTMLTableRowElement.

  6. Dan says:


    I’ve never used HTMLTableRowElement before, but I did a quick google and it seems like all the HTMLTable… DOM2 classes are supported by IE4 and newer.

    The only thing I can suggest based on your code, is that namedItem returns a Node, whilst rowIndex is an attribute of HTMLTableRowElement.

    I’m not sure if that’s what is causing the problem; I’ll have to make up some sample code myself.

    Let me know if you find a solution.

Leave a Reply

Your email address will not be published. Required fields are marked *