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函数。

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

第1组（3）
  John Doemary Janekat Wu
第2组（2）
  Lina Lialex Cole

...等我希望它在哪里

第1组（3）

John Doe 

Mary Jane 

Kat Wu

第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)
    }

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

我宁愿不使用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>

是否可以通过按类名找到列表容器来追加列表项？

1 个答案: