jQuery没有创建区域标签

Question

我正在尝试使用 jQuery 动态创建图像映射，但遇到了一个奇怪的行为：

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

换句话说，我不能一次创建一个区域标签；如果我说

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

然后什么都不会创建。但是，如果我逐渐这样做，它就会起作用，例如

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

我不知道这是为什么，因为我可以创建具有属性和内容的各种其他元素，例如

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

所以我不清楚为什么这不起作用。这并不是那么重要，因为我可以通过链接到 attr 的调用来使它变得更有趣，但这很烦人，我想了解这种行为。

Answer 1

<area /> 元素仅在图像映射中定义（即<map> 元素）。所以基本上以下是失败的（因为这是 jQuery 对你的标记所做的）：

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

这只是其中之一，显然伟大的 jQuery 还没有考虑到（还）。同时尝试：

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