javascript - 如何将 appendChild 添加到每个列表项？

Question

我不明白为什么我不能将 upBtn 附加到所有列表项。感谢您提供的任何帮助。

// append upBtn to all exist lis
const upBtn = document.createElement("button");  
upBtn.className ="up";  
upBtn.textContent = "up";  
const lis = document.querySelectorAll("li");  
for (var i = 0; i < lis.length; i++) {  
    lis[i].appendChild(upBtn);  
}  

Answer 1

问题是您试图一遍又一遍地附加相同的按钮。您每次都需要创建一个单独的按钮。

试试这个:

// append upBtn to all exist lis
const lis = document.querySelectorAll("li");  
for (var i = 0; i < lis.length; i++) {  
    const upBtn = document.createElement("button");  
    upBtn.className ="up";  
    upBtn.textContent = "up";  
    lis[i].appendChild(upBtn);  
}

JSBin:http://jsbin.com/ceseyadoho/edit?html,js,output