javascript - 循环遍历节点数组并向每个节点附加一个子节点只会附加到最后一个元素

Question

我想循环遍历引用 SVG 元素的节点数组，并向每个节点附加一个文本元素，但由于某种原因，所有文本仅出现在数组中的最后一个 SVG 元素中。

这是代码

var svgs = document.getElementsByTagName('svg');

var moduleNames = ["1", "2", "3", "4", "5"];
var textEl = document.createElementNS(svgns, 'text');

var i = 1;

while(i < moduleNames.length) {

  textNode = document.createTextNode( moduleNames[i] );
  textEl.appendChild(textNode);
  svgs[i].appendChild(textEl);

  i++;

}

哦，在执行此操作之前，我已经知道 SVG 元素的数量将与 moduleNames 数组的长度相同。

谢谢!

Answer 1

text only appears in the last SVG element

不在最后 svg <text>中元素，但只有一个。您正在创建一个元素并不断向其附加文本节点。将相同的元素附加到不同的父元素不会克隆它，而只会移动它。

您可能想创建多个元素:

var moduleNames = ["1", "2", "3", "4", "5"];
for (var i=0; i < moduleNames.length; i++) {
    var textEl = document.createElementNS(svgns, 'text'),
        textNode = document.createTextNode( moduleNames[i] );
    textEl.appendChild(textNode);
    svgs[i].appendChild(textEl);
}