是否可以通过按 class 名称定位列表容器来附加列表项？

Question

我在 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>

我想使用 Javascript 将

项附加到内部列表。

当我尝试使用 Javascript 时，我的代码如下所示：

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

function getNames () {
    var group1= [JOHN DOE, MARY JANE, KAT WU]
    var nameLower = group1[random].toLowerCase()
    console.log (nameLower)
    console.log (document.getElementsByClassName("names"))
    newPerson(nameLower,0)

第 2 组以此类推。按下按钮将触发 getNames 函数。

这种方法可行，但我的列表最终看起来像：

Group 1 (3)

  John Doemary Janekat Wu

Group 2 (2)

  Lina Lialex Cole

...等我想要的地方

Group 1 (3)

John Doe 

Mary Jane 

Kat Wu

Group 2 (2)

Lina Li 

Alex Cole

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

当我将列表元素直接添加到 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)
    }

但这根本没有出现嵌套列表。我按 class 选择的方式有问题吗？

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

Answer 1

您需要附加创建的 li 而不是 u 变量，因此请使用

v[index].appendChild(li);

而不是

v.[index].appendChild(u);

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(li)
}

newPerson(2, 'Satpal')

<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>

是否可以通过按 class 名称定位列表容器来附加列表项？

Is it possible to append a list item by locating the list container by class name?

html

javascript

appendchild