javascript - 将多个 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已经是 的最后一个孩子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);
  }   
}