遍历元素不起作用

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

改为

svg.appendChild(newElement);

尝试：

svg[i].appendChild(newElement);

Answer 2

document.getElementsByClassName 的 return 值是一个 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]);
}

遍历元素不起作用

Looping through elements is not working

javascript

svg

for-loop

path

appendchild