Я не уверен, как лучше спросить об этом. Я хочу добавить несколько дочерних элементов 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

Ответы (1)

First appendChild adds the element to the document. Subsequent calls of appendChild on the same element only move the element in the document tree. In your case, tspanElement is already the last child of majNote1, so appendChild does nothing.

So, yes, you should explicitly create each element. But you can and probably should reuse the variable: it is simply a named reference to the object, so you just move the createElementNS line to the top of the loop body, and the variable will refer to a different element on each iteration:

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);
  }   
}

2022 WebDevInsider