Creating Named Elements in IE via JavaScript. Impossible?

Published 6 years 6 months ago on September 24, 2007 — 4 min read

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

There's a conversation brewing

  1. I see you’ve suffered the effects of developing for IE too!

    I would comment that I would change your methods to better handle the spec methods first, then hacks for IE. thus (a) if IE ever fixes itself, you won’t need to run extra tests, and (b) you are not penalizing spec compliant browsers by forcing them to fail the IE way first. (e.g. slow them down, even though they do it right!

  2. That’s unbelievable! There isn’t a proper method of creating elements with a name, yet you can’t add a name after creating the element. The IE team really deserve shooting at times.

    I will be remembering this for the future!

  3. The best method I’ve seen so far for fixing this comes from Brian Adkins, I’ve chronicled my battle with this issue on my blog.

  4. @dave and @Phil: Internet Explorer is and always will be the biggest hurdle for Web development.

    @Aaron Gustafson: Thanks very much for posting the link, it’s a comprehensive resource for others to use.

  5. This is by far one of the most annoying bugs in IE! How can you have a dynamic langage like the DOM, then not support the most basic feature of it!?

    While I was googling, I fould your site, and this site:
    http://webbugtrack.blogspot.com/2007/10/bug-235-createelement-is-broken-in-ie.html

    That discuss the issue. What is really whacky, is that setting attributes in IE is apparently just shy of completely broken! (see here)

    http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html

    Which explains why all the attempts to set the real important things like the class, style, name and onclick attributes **ALL** fail in IE! The support for the DOM in IE is just sad.

  6. I think I may have found another way around this bug.

    I posted the solution I found on my web development blog here:
    http://matts411.com/webdev/creating_form_elements_with_javascript

    Let me know what you guys think.

    Matt

By all means, contribute

Leave a comment

Powered by Fusion

This article is so meta

Published September 24th, 2007

Random article

css.php