如何appendChild到每个列表项？

问题描述：

我不明白为什么我不能追加upBtn到所有的列表项。感谢您提供的任何帮助。如何appendChild到每个列表项？

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

能否请您创建一个小提琴证明了问题？ –

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild附加一个现有的节点会移动它，您需要为每个附加项创建一个新按钮或克隆它。 – jmoerdyk

答

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

试试这个：

// 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

非常感谢您的帮助！ – sabrina

如何appendChild到每个列表项？

相关推荐