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

Question

我不确定问这个的最好方法。 我想将多个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);
 }   
}

当我运行它时，看起来tspan元素只被附加一次而不是5次。 是否可以重复使用相同的tspan变量并将其追加5次？

你可以在http://codepen.io/cmgdesignstudios/pen/VePwog?editors=101上看到一个例子。

Answer 1

首先， appendChild将元素添加到文档中。 对同一元素的后续appendChild调用仅移动文档树中的元素。 在你的情况下， tspanElement已经是tspanElement的最后一个子majNote1 ，所以appendChild什么都不做。

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

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