모든 목록 항목에 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