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). The the time, I wrote
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| function createElementWithName( type, name ){ | |
| var element; | |
| // First try the IE way; if this fails then use the standard way | |
| if( document.all ){ | |
| element = | |
| document.createElement( '< '+type+' name="'+name+'" />' ); | |
| }else{ | |
| element = document.createElement( type ); | |
| element.setAttribute( 'name', name ); | |
| } | |
| return element; | |
| } |
It was a complete hack, but it worked. More importantly, however, it began a discussion of a better way to fix the problem in a cross-browser way. The best solution offered was Anthony Lieuallen’s very efficient one-time function definition:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| } | |
| })(); |
And now Brian Adkins has refactored the script to be even fewer lines of code:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| var createElementWithName = ( function(){ | |
| try { | |
| var el = document.createElement( '<div name="foo">' ); | |
| if( el.tagName !== 'DIV' || el.name !== 'foo' ){ | |
| throw 'create failed'; | |
| } | |
| return function( tag, name ){ | |
| return document.createElement( '<' + tag + ' name="' + | |
| name + '"></' + tag + '>' ); | |
| }; | |
| }catch( e ){ | |
| return function( tag, name ){ | |
| var el = document.createElement( tag ); | |
| el.setAttribute( 'name', name ); | |
| return el; | |
| }; | |
| } | |
| })(); |
Geat job Brian, thanks for sharing.
Comments
Neat stuff, too bad IE just couldn’t handle this stuff right out of the box!
It looks like you have a neat solution.
Do you have any solution to change/set the name or the type after an element has been rendered to the screen? I see that the type attribute can’t be changed either!