すべてのリスト項目に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