Question

Puzzled… after executing the 10 lines of code below, elem1 is defined, and elem2 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):

   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);

If I set a breakpoint on the last line of code, before getElementById is called, Firebug shows me this HTML view:

<div id="tabs-2" class="etc...">
<svg id="chart_tabs-2">
<div id="plist_tabs-2">
</div>

In the DOM view, Firebug shows elem1 with localName svg, and id chart_tabs-2. It’s next sibling is a div, with id plist_tabs-2, which is the value of pldiv_name. Despite all this, getElementById(pldiv_name) fails.

Any ideas why? Thanks.

Answer 1

Can you try creating the DIV not in the SVG namespace?

var pldiv_elem = document.createElement("div");