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

我想循环遍历一个引用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++;

}

var svgs=document.getElementsByTagName（'svg'）；
变量ModuleName=[“1”、“2”、“3”、“4”、“5”]；
var textEl=document.createElements（svgns，“text”）；
var i=1；
while（i

哦，在我这么做之前，我已经知道SVG元素的数量将与moduleNames数组的长度相同

---

谢谢

看起来您想在每个SVG中添加一个新元素，但您只是在所有SVG中移动一个元素，因此它最终会出现在最后一个元素上。创建元素新副本的最简单方法是使用

cloneNode

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

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

不是在最后一个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);
}

var moduleNames=[“1”、“2”、“3”、“4”、“5”]；
对于（var i=0；i

您可能只需将var放在textNode前面，就可以每次创建一个新节点。您正在附加该节点，然后一次又一次地附加它。