노드 배열을 반복하고 각 노드에 자식을 추가하면 마지막 요소에만 추가됩니다.

Question

SVG 요소를 참조하는 노드 배열을 반복하고 각 요소에 텍스트 요소를 추가하고 싶습니다. 텍스트는 배열의 마지막 SVG 요소에만 나타납니다.

다음은 코드

var svgs = document.getElementsByTagName('svg'); 

var moduleNames = ["1", "2", "3", "4", "5"]; 
var textEl = document.createElementNS(svgns, 'text'); 

var i = 1; 

while(i < moduleNames.length) { 

    textNode = document.createTextNode(moduleNames[i]); 
    textEl.appendChild(textNode); 
    svgs[i].appendChild(textEl); 

    i++; 

} 

에게 아, 그리고 나는이 작업을 수행하기 전에 이미 SVG 요소의 수는 한 모듈 배열과 같은 길이 될 것입니다 알고있다.

감사합니다.

Answer 1

텍스트가 마지막 SVG의 요소 마지막 SVG <text> 요소에

되지 않음에 나타납니다으로, 그러나의 단 하나만. 단일 요소를 만들고 텍스트 노드를 계속 추가합니다. 다른 부모에게 동일한 요소를 추가해도 복제되지 않고 이동 만합니다.

당신은 아마 여러 요소를 만들 : 당신은 아마 새 노드마다를 만들 textNode 앞에 VAR을 넣을 수

var moduleNames = ["1", "2", "3", "4", "5"]; 
for (var i=0; i < moduleNames.length; i++) { 
    var textEl = document.createElementNS(svgns, 'text'), 
     textNode = document.createTextNode(moduleNames[i]); 
    textEl.appendChild(textNode); 
    svgs[i].appendChild(textEl); 
} 

Answer 2

새로운 요소를 각 SVG에 추가하려는 것 같습니다.하지만 모든 요소를 ​​가로 질러 움직이는 것이므로 마지막 SVG로 끝납니다. 요소의 새 복사본을 만드는 가장 쉬운 방법은 cloneNode

svgs[i].appendChild(textEl.cloneNode());