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

看起来你想在每个SVG上添加一个 new 元素，但是你只是在它们之间移动一个，所以它最终会在最后一个SVG上移动。创建元素的新副本的最简单方法是使用cloneNode

svgs[i].appendChild(textEl.cloneNode());

Answer 2

文本仅出现在最后一个SVG元素
中

不在 last 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);
}

循环遍历节点数组并将子节点附加到每个节点仅附加到最后一个元素

2 个答案: