title: Append div to parentNode using exact coordinates on area map element
body: <p>I have a function which returns the parentNode and coordinates of an area map tag:</p>
  
  <pre><code> &lt;img src ="planets.gif" width="145" height="126" alt="Planets"
  usemap="#planetmap"&gt;
  
  &lt;map name="planetmap"&gt;
  &lt;area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"&gt;
  &lt;area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"&gt;
  &lt;area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"&gt;
  &lt;/map&gt; 
  </code></pre>
  
  <p>Javascript function: </p>
  
  <pre><code>var count = document.createTextNode("FooBar");
  var dspan = document.createElement("span");
  dspan.appendChild(count);
  
  var hrefs = document.querySelectorAll("area");
  
  for (var i = 0; i &lt; hrefs.length; i++) {
      console.log(hrefs[i].getAttribute('coords'));
      console.log(hrefs[i].parentNode);
      hrefs[i].getAttribute('href');
  }
  </code></pre>
  
  <p>How can I attach the <code>dspan</code> element to the <code>hrefs[i]</code> parentNode using the <code>hrefs[i]</code> coordinates to position the <code>dspan</code> element. I need the new element to be placed anywhere within the area shape. </p>