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
newCell.appendChild(newInput1);
newCell.appendChild(newLabel1);
newCell.appendChild(newInput2);
newCell.appendChild(newLabel2);

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