Ad

Is It Possible To Append A List Item By Locating The List Container By Class Name?

- 1 answer

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?

  • Ad

    Answer

    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>

    Ad
    source: stackoverflow.com
    Ad