将多个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);
  }   
}