Javascript 将多个tspan子元素附加到svg文本对象时，是否每次都需要一个新的子元素？

我不确定问这个问题的最佳方式。我想将多个tspan子元素附加到单个svg文本对象。我有以下代码

var tspanElement = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
var majNote1 = document.getElementById('majNote1');

function myFunction() {
 for(i=1;i<6;i++){
   tspanElement.textContent=i;
   tspanElement.setAttribute("id",i);
   majNote1.appendChild(tspanElement);
 }   
}

var tspanElement=document.createElements（“http://www.w3.org/2000/svg“，“tspan”）；
var majNote1=document.getElementById（'majNote1'）；
函数myFunction（）{
对于（i=1；iFirst
appendChild
将元素添加到文档中。随后对同一元素的
appendChild
调用将导致文档树中的元素。在您的情况下，
tspanElement
已经是
majNote1
的最后一个子元素，因此
appendChild
不做任何操作

因此，是的，您应该显式地创建每个元素。但是您可以并且可能应该重用该变量：它只是对对象的命名引用，因此您只需将
createElements
行移动到循环体的顶部，该变量将在每次迭代中引用不同的元素：

function myFunction() {
  var majNote1 = document.getElementById('majNote1');
  var tspanElement;
  for(i=1;i<6;i++){
    tspanElement = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
    tspanElement.textContent=i;
    tspanElement.setAttribute("id",i);
    majNote1.appendChild(tspanElement);
  }   
}

函数myFunction（）{
var majNote1=document.getElementById（'majNote1'）；
var面板；
对于（i=1；i