Циклические элементы не работают

Question

Я пытаюсь добавить дополнительный путь к каждому SVG на веб-странице. Я настроил цикл for, и он работает, но как только он проходит через него, он говорит мне, что appendChild() не является функцией. Если я вывожу все из цикла appendChild() работает. Что я делаю неправильно здесь?

var svg = document.getElementsByClassName('curve-position-bottom'); //Get svg element 
 
for (var i = 0; i < svg.length; i++) { 
 
    console.log(svg.length); 
 

 
    function addPath() { 
 
    console.log('working'); 
 
    var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path'); //Create a path in SVG's namespace 
 
    newElement.setAttribute("d", "M0 0 C50 100 50 100 100 0 "); //Set path's data 
 
    newElement.style.stroke = "#005780"; //stroke colour 
 
    newElement.style.strokeWidth = "13px"; //Set stroke width 
 
    newElement.style.fill = "none"; //Set stroke width 
 
    svg.appendChild(newElement); 
 
    } 
 
    addPath(); 
 

 
}

<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="45px" class="engle-curve curve-position-bottom" style="fill:#e6e2af"> 
 
    <path stroke-width="0" d="M0 0 C50 100 50 100 100 0 L100 100 0 100"></path> 
 
</svg> 
 

 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="45px" class="engle-curve curve-position-bottom" style="fill:#e6e2af"> 
 
    <path stroke-width="0" d="M0 0 C50 100 50 100 100 0 L100 100 0 100"></path> 
 
</svg> 
 

 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="45px" class="engle-curve curve-position-bottom" style="fill:#e6e2af"> 
 
    <path stroke-width="0" d="M0 0 C50 100 50 100 100 0 L100 100 0 100"></path> 
 
</svg>

Answer 1

Возвращаемое значение document.getElementsByClassName является NodeList, а не отдельный элемент. Чтобы использовать определенный SVG, вам необходимо использовать svg[i].

---

Кроме того, никакого отношения к вашему вопросу, но это было бы хорошей идеей, чтобы переместить это определение функции из петли (по соображениям производительности и определения объема) и назвать его с SVG элемент в качестве параметра. Это выглядело бы так:

var svg = document.getElementsByClassName('curve-position-bottom'); //Get svg elements 

function addPath(svg) { 
    console.log('working'); 
    var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path'); //Create a path in SVG's namespace 
    newElement.setAttribute("d", "M0 0 C50 100 50 100 100 0 "); //Set path's data 
    newElement.style.stroke = "#005780"; //stroke colour 
    newElement.style.strokeWidth = "13px"; //Set stroke width 
    newElement.style.fill = "none"; //Set stroke width 
    svg.appendChild(newElement); 
} 

for (var i = 0, length = svg.length; i < length; i++) { 
    addPath(svg[i]); 
} 

Answer 2

Вместо

svg.appendChild(newElement); 

попробовать:

svg[i].appendChild(newElement);