Creating Named Elements in IE via JavaScript. Impossible?

It’s almost humorous to me that I still to this day find new quirks and bugs within Internet Explorer. I try to keep everything in mind as I work on a project, in an effort to be one step ahead when it comes to testing in IE, but it’s not always easy.

Last week, a project was to enhance a form on a client website by integrating the addition of new fields via JavaScript. The basic idea is this; there is a section in the form where a number of file inputs would need to be duplicated based on the need of the reader filling out the form. The number of file inputs could range from one to an unlimited number, which, come to think of it, I need to revisit. But I digress.

As I was working with the form, I began to notice that it wasn’t working improperly in Internet Explorer 6 or Internet Explorer 7. The script kept track of how many inputs had been added via a simple counter, and provided a name attribute reflecting that number using an established naming convention. It was the basis for allowing multiple file uploads.

I tested again using Firefox and everything appeared to be fine. My next step was to check out what was going on with the DOM in IE.

Viewing Generated Source in IE

As we all know, there aren’t too many developer resources for working with Internet Explorer. The Internet Explorer Developer Toolbar is about the only tool that really helps you to diagnose any troubles you may be having. It has come in handy for me from time to time, but personally I think it’s a bit awkward to use and generally end up resorting to a quick border:1px solid #f00; to help me diagnose any troubles I may be having with CSS in IE.

In this case nothing like that could have helped, so I resorted to the Developer Toolbar and realized that none of the created elements had a name in Internet Explorer 6 or 7. Everything was working fine in other browsers, so I wasn’t sure exactly what was going on. After a bit of searching, I found that IE simply does not support the application of a name attribute to an element created via DOM scripting. Ridiculous.

As an aside, I also came across a quick tip on replicating the View Generated Source functionality of the Web Developer Toolbar for Firefox, a feature I find myself using quite a bit. You can explore the generated DOM using the Developer Toolbar in Internet Explorer, but the following snippet will display the generated source in plain text, just paste it in the location bar.

javascript:'<xmp>' + window.document.body.outerHTML+ '</xmp>'

Continuing: A bit more research narrowed the scope of this ‘issue’. It turns out the IE more specifically does not allow the name of an element to be changed after it has been created. Bummer. What do do about it?

Thankfully, the Internet is full of extremely intelligent people. Most of the time, other people have had the same exact problem you’re having, they have written about it, and also (hopefully) provided a solution to help you out. This was one of those cases. In the article Setting the “name” attribute in Internet Explorer, a fix for this problem is offered in the following function:

function createNamedElement(type, name) {
  var element = null;
  // Try the IE way; this fails on standards-compliant browsers
  try {
    element = document.createElement('<'+type+' name="'+name+'">');
  } catch (e) {
  }
  if (!element || element.nodeName != type.toUpperCase()) {
    // Non-IE browser; use canonical method to create named element
    element = document.createElement(type);
    element.name = name;
  }
  return element;
}

Essentially, the function checks to see whether or not the reader is using Internet Explorer, and implements the element accordingly. I also happened to find another solution that uses the conditional comment method:

/*@cc_on @if (@_jscript)
var newNode = document.createElement('<input name="'+elementName+'">');
@else */
var newNode = document.createElement('input');
newNode.name = elementName;
/* @end @*/

Many developers have their own opinions about using conditional comments both in (X)HTML as well as JavaScript, so it was nice to find examples both with and without. Which would you prefer?

Hopefully, if you haven’t come across or read about this bug before, you’ll remember it when it comes to your next Web app as you ad progressive enhancement in dynamic addition of elements requiring a name.

References

• View HTML Source Generated by AJAX
• Setting the “name” attribute in Internet Explorer