javascript - エリアマップ要素の正確な座標を使用して、parentNode に div を追加します

Question

エリアマップタグのparentNodeと座標を返す関数があります:

 <img src ="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map> 

Javascript 関数:

var count = document.createTextNode("FooBar");
var dspan = document.createElement("span");
dspan.appendChild(count);

var hrefs = document.querySelectorAll("area");

for (var i = 0; i < hrefs.length; i++) {
    console.log(hrefs[i].getAttribute('coords'));
    console.log(hrefs[i].parentNode);
    hrefs[i].getAttribute('href');
}

要素を配置する座標を使用して、dspan要素をhrefs[i]parentNodeにアタッチするにはどうすればよいですか。領域形状内の任意の場所に新しい要素を配置する必要があります。hrefs[i]dspan