3

これを尋ねる最善の方法がわかりません。複数の 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 回ではなく 1 回だけ追加されているように見えます。同じ tspan 変数を再利用して、5 回別々に追加することはできますか?

http://codepen.io/cmgdesignstudios/pen/VePwog?editors=101で例を見ることができます。

4

1 に答える 1

5

最初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);
  }   
}
于 2016-01-01T03:02:21.613 に答える