0

我想遍历引用 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 数组的长度相同。

谢谢！

4

2 回答 2

1

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

svgs[i].appendChild(textEl.cloneNode());
于 2013-08-08T01:55:37.003 回答
1

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

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

您可能想要创建多个元素：

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);
}
于 2013-08-08T02:34:05.533 回答