Comments on: Death to bad DOM Implementations

by: A better createElementWithName()

Mon, 27 Aug 2007 15:50:28 +0000

[…] Back in 2005, I wrote a piece about IE’s abysmal generation of NAMEd elements via the DOM (which, interestingly enough, has proven to be one of the most popular posts on the blog, pointing to the fact that this is an obvious pain point for many DOM scripters out there). Since then, numerous improvements have been suggested, including the latest refactor […]

by: alt-tag.com

Wed, 20 Dec 2006 18:34:48 +0000

IE DOM Bugs…

I’ve been working on a Javascript project where it’s necessary to create input elements (radio buttons and checkboxes) dynamically. With a functional DOM, it takes only a couple of lines of code, and works fine in Firefox and Safari. Too ba…

by: wizardishungry/blog » When to use Google to solve your problems and when to solve things yourself

Tue, 12 Dec 2006 23:38:05 +0000

[…] At work, I’ve been working on a fairly complex AJAX application that melds the Prototype Javascript library with quite a bit of ad-hoc DOM manipulation. It worked fine in Firefox, but my DOM code silently failed in Internet Explorer, despite the AJAX request successfully reaching the server. Googling the various DOM functions turned up nothing but red herrings, so I fired up my Internet Explorer script debugger and decided to step through line by line. […]

by: Mark Griffin

Sat, 06 May 2006 00:17:37 +0000

Ooops! Actually you can call function by simply say function() itself…

by: Mark Griffin

Fri, 05 May 2006 23:16:27 +0000

document.createNamedElement = function(type, name)

function createElementWithName()

This may be a silly question but how do you activate these functions?
That is how do you actually call them? I’m relatively new to javascript.
Normally you call a java funtion by simply var return = function()

by: Aaron

Wed, 03 May 2006 18:52:06 +0000

@bob: Exactly my thinking and Anthony beat me to the execution.

@pete: It’s been a while since I’ve done major JS surgery in IE, so I haven’t been looking for tools, but when I need to read out what’s been triggered and what hasn’t to see where a script is failing, I usually use my homegrown app jsTrace.

@ anthony: Thanks, that’s great. I was planning to tackle the same thing myself, but ended up too bogged down to work on it. And, yes, I’d prefer the DOM method to add the name as it’s the most forward-compatible. Great work.

by: Anthony Lieuallen

Wed, 03 May 2006 18:08:52 +0000

Having just discovered this page, and seeing some very sensical comments, I came up with this version:

function createElementWithName(){}
(function(){
  try {
    var el=document.createElement( '<div name="foo">' );
    if( 'DIV'!=el.tagName ||
        'foo'!=el.name ){
      throw 'create element error';
    }
    createElementWithName = function( tag, name ){
      return document.createElement( '<'+tag+' name="'+name+'"></'+tag+'>' );
    }
  }catch( e ){
    createElementWithName = function( tag, name ){
      var el = document.createElement( tag );
      // setAttribute might be better here ?
      el.name = name;
      return el;
    }
  }
})();

by: Pete Moore

Mon, 01 May 2006 14:39:32 +0000

Thanks for posting this - f@#k IE - I also just spent several hours losing my mind trying to get to the bottom of this.

I couldn’t use the solutions above as I need to rename a copied DOM element. The hack I ended up with was to mess with innerHTML, eg:

element.parentNode.innerHTML.replace(/sourceFormName/,'newFormName')

If anyone has a better suggestion, I’m all ears :)

OT: I use FireBug with FireFox (if you don’t have it, stop what you are doing and install it now). I can’t help but thinking I could have saved the last several hours if I had an equivalent for IE … any suggestions?

by: Bob Ippolito

Wed, 26 Apr 2006 23:43:41 +0000

You really don’t want to use an implementation that has to do the browser capability detection on every single createElementWithName call. Instead you should do it once when *defining* the function. Will be much faster and cleaner.

by: Aaron Campos

Thu, 20 Apr 2006 00:00:56 +0000

Kind of redundant but since I ran into this too I figured I'd post the slight variation I used to get this to work using the Prototype.js Try.these() function:

function createElementWithName( type, name ){
  return Try.these(
    function(){
      return document.createElement('<'+type+' name="'+name+'" /%gt;')
    },
    function(){
      var element = document.createElement(type);
      element.setAttribute( 'name', name );
      return element;
    } );
}