javascript - 给一个svg文本对象追加多个tspan子元素时，每次都需要一个新的子元素吗？

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 对同一元素的后续调用 only move文档树中的元素。在您的情况下，tspanElement 已经是 majNote1 的最后一个 child ，因此 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);
  }   
}