Gotcha Of The Day - Setting The HTML Name Attribute Dynamically

I've now been bitten by this one twice: First, I created an iframe dynamically (by using JavaScript and the DOM) and for some reason, it wasn't submitting to the right target. And then last night, a set of radio buttons I created using the JavaScript DOM didn't work in IE. They rendered, but when you clicked on them, nothing happened.

I was doing something like:

  var r = document.createElement("input");
  r.setAttribute("name", "RadioButtonGroupName");
  r.setAttribute("type", "radio");
  r.setAttribute("value", "Whoo!");
  ...

It turns out, for IE, setting the name attribute dynamically isn't possible. At least not through obvious means. Instead, you have to do:

  var r = null;
  try {
     // For IE
     r = document.createElement("<input name='" + name + "'>");
  } catch(ex) {
     // For browsers that work
     r = document.createElement("input");
     r.setAttribute("name", name);
  }
  r.setAttribute("type", "radio");
  r.setAttribute("value", "Whoo!");

I know, how ugly is that? But, at least there's a work around that lets you stay in the world of DOM without hard coding things too badly.