title: getElementById failing on a valid div?
body: <p>Puzzled... after executing the 10 lines of code below, <code>elem1</code> is defined, and <code>elem2</code> is null. However, the 2 blocks of code are identical, apart from the variable names, and the fact that one is creating an 'svg' node (which works) and the other is creating a 'div' node (which fails):</p>
  
  <pre><code>   var chart_name = "chart_" + ui.panel.id;
     var chart_elem = document.createElementNS(svgNS, "svg");
     chart_elem.setAttributeNS(null, "id", chart_name);
     top.appendChild(chart_elem);
     var elem1 = document.getElementById(chart_name);
  
     var pldiv_name = "plist_" + ui.panel.id;
     var pldiv_elem = document.createElementNS(svgNS, "div");
     pldiv_elem.setAttributeNS(null, "id", pldiv_name);
     top.appendChild(pldiv_elem);
     var elem2 = document.getElementById(pldiv_name);
  </code></pre>
  
  <p>If I set a breakpoint on the last line of code, before <code>getElementById</code> is called, Firebug shows me this HTML view: </p>
  
  <pre><code>&lt;div id="tabs-2" class="etc..."&gt;
  &lt;svg id="chart_tabs-2"&gt;
  &lt;div id="plist_tabs-2"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the DOM view, Firebug shows <code>elem1</code> with localName <code>svg</code>, and id <code>chart_tabs-2</code>. It's next sibling is a div, with id <code>plist_tabs-2</code>, which is the value of <code>pldiv_name</code>. Despite all this, <code>getElementById(pldiv_name)</code> fails.</p>
  
  <p>Any ideas why? Thanks.</p>