title: How can I use javascript to write <map> and <area> html tags?
body: <p>What I need to do is dynamically write area tags on to a map as they are added so that when I click on them they trigger a function.</p>
  
  <pre><code>    &lt;img src="out.jpg" usemap="#mapmap"/&gt;
      &lt;map name="mapmap"&gt;
          &lt;area id="1" shape="rect" coords="75,300,125,400" onclick="writeDiv(this.id)"/&gt;
          &lt;area id="2" shape="rect" coords="175,300,225,400" onclick="writeDiv(this.id)"/&gt;
          &lt;area id="3" shape="rect" coords="275,300,325,400" onclick="writeDiv(this.id)"/&gt;
      &lt;/map&gt;
  </code></pre>
  
  <p>That does exactly what I need if I know where areas are going to be. However, I need to load them dynamically as the user adds more and I've already tried this (in script tags):</p>
  
  <pre><code>    $("&lt;img src=\"out.jpg\" usemap=\"#mapmap\"\/&gt;").appendTo('body');
          $("&lt;map name=\"mapmap\"&gt;").appendTo('body');
              $("&lt;area id=\"1\" shape=\"rect\" coords=\"75,300,125,400\" onclick=\"writeDiv(this.id)\"\/&gt;").appendTo('body');
              $("&lt;area id=\"2\" shape=\"rect\" coords=\"175,300,225,400\" onclick=\"writeDiv(this.id)\"\/&gt;").appendTo('body');
              $("&lt;area id=\"3\" shape=\"rect\" coords=\"275,300,325,400\" onclick=\"writeDiv(this.id)\"\/&gt;").appendTo('body');
          $("&lt;\/map&gt;").appendTo('body');
  </code></pre>
  
  <p>Which would be fine as I could still format the rest of my page around the image except that it doesn't work as you'd expect. I've already tested</p>
  
  <pre><code>    $("&lt;div id=\"test\"&gt;testing text&lt;\/div&gt;").appendTo('body');
  </code></pre>
  
  <p>and that works to write text to the bottom of the body of my page.</p>
  
  <p>So, is there a way to get this to work, or are the dependencies between  and  always going to screw it up? If you can think of another way entirely to do it I'm open to suggestions. Thanks!</p>