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

Question

I have this nested list in 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>

And I want to append

items to the inner lists using Javascript.

When I tried with Javascript, my code looked like this:

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)

And then so on for Group 2. The getNames function would be triggered by pressing a button.

This kind of worked, but my list ended up looking like:

Group 1 (3)

  John Doemary Janekat Wu

Group 2 (2)

  Lina Lialex Cole

...etc. Where I'd want it to be

Group 1 (3)

John Doe 

Mary Jane 

Kat Wu    

Group 2 (2)

Lina Li 

Alex Cole

The console always has the name correct, but the nodelist never changes (Not sure if it's supposed to when I add a child).

When I add to list elements directly to the HTML, the formatting is correct, so I don't think it's a CSS issue.

I've also tried:

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

but that made no nested list appear at all. Is there something wrong with how I'm selecting by class?

I'd rather not use IDs because my list is quite long and my code already looks messy enough, but is this impossible without IDs?

Answer 1

You need to append created li instead of u variable, so use

v[index].appendChild(li);

instead of

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>