title: Is it possible to append a list item by locating the list container by class name?
body: <p>I have this nested list in html:</p>
  <pre><code>      &lt;ul&gt;
          &lt;li &gt; Group One(&lt;span id = &quot;amount1&quot;&gt; 0 &lt;/span&gt;)
            &lt;ul class = &quot;names&quot;&gt; &lt;/ul&gt; &lt;/li&gt;
  
          &lt;li&gt; Group Two (&lt;span id = &quot;amount2&quot;&gt; 0 &lt;/span&gt;)
            &lt;ul class = &quot;names&quot; &gt; &lt;/ul&gt; &lt;/li&gt;
  
          &lt;li&gt; Group Three (&lt;span id = &quot;amount3&quot;&gt; 0 &lt;/span&gt;)
            &lt;ul class = &quot;names&quot;&gt; &lt;/ul&gt; &lt;/li&gt;
  
          &lt;li&gt; Group 4 (&lt;span id = &quot;amount4&quot;&gt; 0 &lt;/span&gt;)
            &lt;ul class = &quot;names&quot;&gt; &lt;/ul&gt; &lt;/li&gt;
        &lt;/ul&gt;
  </code></pre>
  <p>And I want to append <li> items to the inner lists using Javascript.</p>
  <p>When I tried with Javascript, my code looked like this:</p>
  <pre><code>function newPerson (index,name) {
    let li = document.createElement(&quot;li&quot;)
    let t = document.createTextNode(name);
    let u = li.appendChild(t)
    document.getElementsByClassName(&quot;names&quot;)[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(&quot;names&quot;))
      newPerson(nameLower,0)
  </code></pre>
  <p>And then so on for Group 2. The getNames function would be triggered by pressing a button.</p>
  <p>This kind of worked, but my list ended up looking like:</p>
  <blockquote>
  <p>Group 1 (3)</p>
  <pre><code>  John Doemary Janekat Wu
  </code></pre>
  <p>Group 2 (2)</p>
  <pre><code>  Lina Lialex Cole
  </code></pre>
  </blockquote>
  <p>...etc. Where I'd want it to be</p>
  <blockquote>
  <p>Group 1 (3)</p>
  <pre><code>John Doe 
  
  Mary Jane 
  
  Kat Wu    
  </code></pre>
  <p>Group 2 (2)</p>
  <pre><code>Lina Li 
  
  Alex Cole
  </code></pre>
  </blockquote>
  <p>The console always has the name correct, but the nodelist never changes (Not sure if it's supposed to when I add a child).</p>
  <p>When I add to list elements directly to the HTML, the formatting is correct, so I don't think it's a CSS issue.</p>
  <p>I've also tried:</p>
  <pre><code>function newPerson (index,name) {
        let li = document.createElement(&quot;li&quot;)
        let t = document.createTextNode(name);
        let u = li.appendChild(t)
        let v = document.getElementsByClassName(&quot;names&quot;)
        v.[index].appendChild(u)
      }
  </code></pre>
  <p>but that made no nested list appear at all. Is there something wrong with how I'm selecting by class?</p>
  <p>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?</p>