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

【问题标题】：When appending multiple tspan child elements to an svg text object, is a new child element needed each time?将多个 tspan 子元素附加到 svg 文本对象时，每次都需要一个新的子元素吗？
【发布时间】：2016-01-01 02:41:59
【问题描述】：

我不确定提出这个问题的最佳方式。我想将多个 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看到一个例子

【问题讨论】：

标签： javascript text svg tspan

【解决方案1】：

首先appendChild 将元素添加到文档中。随后在文档树中的同一元素 only move 上调用 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);
  }   
}

【讨论】：