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

Looping through an array of nodes and appending a child to each one only appends to the last element

本文关键字：节点 一个 子节点 元素 最后一个 数组 遍历 循环      更新时间：2023-09-26

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

谢谢！

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

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

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

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

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

svgs[i].appendChild(textEl.cloneNode());
相关文章：