Today I was merrily (for at least the first 2 minutes) trying to get a little script to run correctly in Internet Explorer. Naturally, I had done all of my development on my trusty MacBook, testing it in Firefox. I’d played with it a bit in Safari and Camino, both nice browsers that ran it absolutely fine. I hadn’t bothered to fire up Parallels to test it out in Internet Explorer, mostly because I was a little scared.

Yesterday, I bit the bullet. Thankfully, there weren’t excessively many issues. The first thing I stumbled upon was that Internet Explorer doesn’t like the DOM element.getAttribute(‘class’) method very much (it returns null regardless of whether your element actually has a class.) I was forced to use the less pleasing direct DOM alternative (i.e. element.className.) Similar logic applied to the ‘name’ attribute (element.setAttribute(‘name’, ‘x’) throws an error; element.name = ‘x’ doesn’t.)

The second issue was significantly more irksome, only because it took quite a lot longer to figure out what the hell was going on. This is partly because of the way my script was structured, which only made it more annoying. When creating a form input element dynamically, I was consistently getting the error: ‘Could not get the type property.’ This was not good, as there seemed to be no way to create, say, a radio button without setting its type.

To clarify: I wanted to end up with some HTML that looked like <input type=”radio” name=”my_name” class=”my_class” id=”my_id” />. I was using Javascript that looked like this:

function createElt(parent_elt, elt_type, elt_id, elt_class) {
var new_elt = document.createElement(elt_type.toUpperCase());
if (elt_id) { new_elt.setAttribute(‘id’, elt_id); }
if (elt_class) { new_elt.setAttribute(‘class’, elt_class); }
parent_elt.appendChild(new_elt);
return new_elt;
}

function createFormElt(parent_elt, elt_type, elt_id, elt_class, elt_formtype, elt_name, elt_value, elt_onclick, elt_onfocus, elt_onblur) {
var new_elt = createElt(parent_elt, elt_type, elt_id, elt_class);
if (elt_name) { new_elt.name = elt_name; }
if (elt_formtype) { new_elt.setAttribute(‘type’, elt_formtype); }
if (elt_value) { new_elt.setAttribute(‘value’, elt_value); }
if (elt_onclick) { new_elt.onclick = elt_onclick; }
if (elt_onfocus) { new_elt.onfocus = elt_onfocus; }
if (elt_onblur) { new_elt.onblur = elt_onblur; }
return new_elt;
}

createFormElt(parent_elt, ‘input’, ‘my_id’, ‘my_class’, ‘radio’, ‘my_name, ‘my_value’, clickMethod, focusMethod, blurMethod);

The problem was that Internet Explorer wasn’t gettin’ down with the idea of setting the ‘type’ attribute *after* appending the element to its parent. Never mind that, in theory, I still had a perfectly valid reference to the element in question, nor that setting any other attribute worked just fine. In any case, the solution was just to set the type element before appending. In this case I decided not to use the createElt method for form elements, but I could just as easily have added a parameter for type to createElt.

The code that worked:

function createFormElt(parent_elt, elt_type, elt_id, elt_class, elt_formtype, elt_name, elt_value, elt_onclick, elt_onfocus, elt_onblur) {
var new_elt = document.createElement(elt_type);
if (elt_name) { new_elt.name = elt_name; }
if (elt_formtype) { new_elt.setAttribute(‘type’, elt_formtype); }
if (elt_id) { new_elt.setAttribute(‘id’, elt_id); }
if (elt_class) { new_elt.setAttribute(‘class’, elt_class); }
if (elt_value) { new_elt.setAttribute(‘value’, elt_value); }
if (elt_onclick) { new_elt.onclick = elt_onclick; }
if (elt_onfocus) { new_elt.onfocus = elt_onfocus; }
if (elt_onblur) { new_elt.onblur = elt_onblur; }
parent_elt.appendChild(new_elt);
return new_elt;
}

createFormElt(parent_elt, ‘input’, ‘my_id’, ‘my_class’, ‘radio’, ‘my_name, ‘my_value’, clickMethod, focusMethod, blurMethod);

Now I just have to get the CSS working…