jquery name attribute of map element in IE

Question

The following jQuery works fine in Firefox for me, but failed in IE6:

$("<map></map>").attr("name",somevar).appendTo("#someElement");

The problem is that the map element never gets the name attribute generated which I can prove by calling alert($("#someElement").html()); and the fact that the image it is associated with doesn't have its links

If I use this instead, it works fine:

$("<map name='" + somevar + "'></map>").appendTo("#someElement");

I'm happy to use the second line of code, but was wondering if anyone else has had this problem...or an explanation of why it didn't work (i'm wondering that it is specific to the name attribute)...

(HTML output from first and second scenario):

IE6 using the first line:

<MAP><AREA shape=RECT coords=0,0,300,110 href="http://google.com"></MAP><IMG height=215 src="include/nav-images/main.png" width=591 useMap=#tehmap>

IE6 using the second line:

<MAP name=tehmap><AREA shape=RECT coords=0,0,300,110 href="http://google.com"></MAP><IMG height=215 src="include/nav-images/main.png" width=591 useMap=#tehmap>

Answer 1

(This is more comment material, but as it's so long I have no choice but to post it as an answer. Hopefully it might point someone in the right direction.)

Some results from investigations, using IE 8 operating in IE 7 mode (which also exhibits this problem):

$('<map />').attr('x', 'abc').wrap('<div />').parent().html()
"<MAP x="abc"></MAP>"

...it can correctly set any other element of a map tag. But wait...

>>$('<map />').attr('name', 'abc').attr('name')
"abc"

So it is getting set. But for some reason the HTML returned by .html() leaves it out. Why? The actual object is right, but it's not rendering the markup correctly.

Even more strangely:

>>$('#dummy').append($('<map />').attr("name", "abc"))
>>$('#dummy').html()
"<MAP></MAP>"

But if I look at the HTML according to the IE developer tools, it's...

<map submitName="abc"/>

I investigated this a bit further, and found this question:

Weird behaviour of iframe `name` attribute set by jQuery in IE

And a relevant quote from the accepted answer:

So what appears to be happening is that IE-up-to-7 redirects all use of attributes called name to an otherwise-invisible property, internally called submitName, that for form fields changes the data the field will generate as part of a form submission, but which doesn't change the real name attribute used for HTMLCollection indexing, radio-grouping, getElementsByName, or, in the case of [i]frames, targeting.

This seems to be the case with any element that uses the name attribute semantically. For example:

>>$('#dummy').append($('<div />').attr("name", "abc"))
>>$('#dummy').append($('<input />').attr("name", "abc"))
>>$('#dummy').html()
"<DIV name="abc"></DIV><INPUT>"

So it appears to a strange manifestation of a relatively commonplace IE bug, simple as that. As you already have a workaround, I'd say stick with it -- but with some luck someone else can come along and explain this a little better.