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

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)

第二组也是如此。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>