Javascript 是否可以通过按类名定位列表容器来追加列表项？

我有一个html嵌套列表：

      <ul>
        <li > Group One(<span id = "amount1"> 0 </span>)
          <ul class = "names"> </ul> </li>

        <li> Group Two (<span id = "amount2"> 0 </span>)
          <ul class = "names" > </ul> </li>

        <li> Group Three (<span id = "amount3"> 0 </span>)
          <ul class = "names"> </ul> </li>

        <li> Group 4 (<span id = "amount4"> 0 </span>)
          <ul class = "names"> </ul> </li>
      </ul>

第二组的情况也是如此。按下按钮将触发getNames函数

这种方法很有效，但我的列表最终看起来像：

第一组（3）

第2组（2）

……等等。我希望它在哪里

第一组（3）

第2组（2）

控制台的名称始终正确，但节点列表从不更改（不确定在添加子级时是否应该更改）

当我将列表元素直接添加到HTML中时，格式是正确的，所以我认为这不是CSS问题

我也试过：

function newPerson (index,name) {
      let li = document.createElement("li")
      let t = document.createTextNode(name);
      let u = li.appendChild(t)
      let v = document.getElementsByClassName("names")
      v.[index].appendChild(u)
    }

但这使得嵌套列表根本没有出现。我选择班级的方式有问题吗

---

我不想使用IDs，因为我的列表很长，我的代码看起来已经够乱了，但是没有IDs这是不可能的吗？

您需要附加创建的

li

而不是

u

变量，所以使用

v[index].appendChild(li);

而不是

v.[index].appendChild(u);

函数newPerson（索引、名称）{
让li=document.createElement（“li”）
设t=document.createTextNode（名称）；
设u=li.t
设v=document.getElementsByClassName（“名称”）
v[index].appendChild（li）
}
newPerson（2，'Satpal'）

第一组（0）


第二组（0）


第三组（0）


第4组（0）

Append

li

即

。appendChild（li）

不应该是文档吗。getElementsByClassName（“名称”）[index]。appendChild（li）？@Olafant是的，你是对的，找到了我的问题！

John Doe 

Mary Jane 

Kat Wu    

Lina Li 

Alex Cole

function newPerson (index,name) {
      let li = document.createElement("li")
      let t = document.createTextNode(name);
      let u = li.appendChild(t)
      let v = document.getElementsByClassName("names")
      v.[index].appendChild(u)
    }

v[index].appendChild(li);

v.[index].appendChild(u);