CODEWITHSUNDEEP
javascriptappendchild
sabrina
sabrina

Reputation: 23

How to appendChild to every list item?

I don't understand why can't I append upBtn to all the list items. Thanks for any help you could provide.

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

Upvotes: 1

Views: 381

Answers (1)

Jonathan.Brink
Jonathan.Brink

Reputation: 25393

The problem is that you are trying to append the same button over and over again. You need to create a separate button each time.

Try this:

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

Upvotes: 3

Related Questions