jQuery not creating area tags

Question

I'm trying to use jQuery to dynamically create an image map, and I ran into a weird behavior:

alert( $('<area />').size() );                         // 1
alert( $('<area shape="circle" />').size() );          // 0
alert( $('<area />').attr("shape", "circle").size() ); // 1

In other words, I can't create an area tag all at once; if I say

$('<area shape="circle" coords="50,25,4" href="#" alt="foo" />')

then nothing is created. However, it works if I do it gradually, e.g.

$('<area />')
    .attr("shape", "circle")
    .attr("coords", "50,25,4")
    .attr("href", "#")
    .attr("alt", "foo");

I have no idea why this is, because I can create all kinds of other elements with attributes and content, e.g.

$('<div id="foo" />')
$('<div id="bar">Hello World!</div>')

so I'm not clear on why this isn't working. This isn't all that important since I can make it wirk by chaining calls to attr, but that's annoying and I'd like to understand this behavior.

Answer 1

An <area /> element is only defined inside an image map (i.e. <map> element). So essentially the following is failing (as this is what jQuery is doing with your markup):

var div = document.createElement('div');
div.innerHTML = '<area shape="circle" coords="50,25,4" href="#" alt="foo" />';
return div.childNodes; // this is empty, as the browser didn't allow 
                       // the <area /> element inside the <div> element

It's just one of those things obviously the great jQuery has not accounted for (yet). In the meantime try:

var $area = $(
    '<map><area shape="circle" coords="50,25,4" href="#" alt="foo" /></map>'
).contents();

// $area is the jQuery object for the newly created <area /> tag

$area.attr('coords'); // "50,25,4"

// etc