При добавлении нескольких дочерних элементов 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);
  }   
}