Javascript 如何将子项附加到每个列表项？

我不明白为什么我不能将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);  
}  

//将upBtn追加到所有现有lis
const upBtn=document.createElement（“按钮”）；
upBtn.className=“向上”；
upBtn.textContent=“向上”；
const lis=document.queryselectoral（“li”）；
对于（var i=0；i

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

试试这个：

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

//将upBtn追加到所有现有lis
const lis=document.queryselectoral（“li”）；
对于（var i=0；i

---

JSBin:

你能制作一把小提琴来演示这个问题吗？追加现有节点将移动它，您需要为每个追加或克隆节点创建一个新按钮。