javascript - getElementById 在有效的 div 上失败？

Question

困惑...执行下面10行代码后，elem1被定义，而elem2为null。然而，除了变量名称之外，这两个代码块是相同的，并且一个正在创建“svg”节点(有效)，另一个正在创建“div”节点(失败):

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

如果我在调用 getElementById 之前在代码的最后一行设置断点，Firebug 会向我显示以下 HTML View :

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

在 DOM View 中，Firebug 显示带有 localName svg 和 id chart_tabs-2 的 elem1。它的下一个兄弟是一个 div，id 为 plist_tabs-2，它是 pldiv_name 的值。尽管如此，getElementById(pldiv_name) 仍然失败。

有什么想法吗？谢谢。

Answer 1

您可以尝试在 SVG 命名空间中创建 DIV 而不是吗？

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