how to append the button to each <li> tag in javascript using forEach loop

Question

I want to append the button tag to each of the 6 li tags using a forEach loop but after running the below code I am only getting a button tag on the 6th (last) li tag. Please help and let me what I am doing wrong.

var button = document.createElement('button');
button.appendChild(document.createTextNode('delete'));
var spam = document.createElement('spam');
var li = document.querySelectorAll('li');

li.forEach(function(i) {
  i.appendChild(button);
});

<body>
  <h1>Shopping List</h1>
  <p id="first">Get it done today</p>
  <input id="userinput" type="text" placeholder="enter items">
  <button id="enter" width='50px'>Enter</button>
  <ul>
    <li class="bold red" random="23">Notebook</li>
    <li>Jello</li>
    <li>Spinach</li>
    <li>Rice</li>
    <li>Birthday Cake</li>
    <li>Candles</li>
  </ul>
</body>

Shubham Dixit · Accepted Answer · 2019-10-09 17:43:47Z

4

Just move document.createElement('button')in forEach Loop of yours

var spam = document.createElement('spam');
var li = document.querySelectorAll('li');

li.forEach(function(i) {
  var button = document.createElement('button');
  button.appendChild(document.createTextNode('delete'));
  i.appendChild(button);
});

<body>
  <h1>Shopping List</h1>
  <p id="first">Get it done today</p>
  <input id="userinput" type="text" placeholder="enter items">
  <button id="enter" width='50px'>Enter</button>
  <ul>
    <li class="bold red" random="23">Notebook</li>
    <li>Jello</li>
    <li>Spinach</li>
    <li>Rice</li>
    <li>Birthday Cake</li>
    <li>Candles</li>
  </ul>

</body>

answered Oct 9, 2019 at 17:43

Shubham Dixit

9,2685 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rez shahr · Accepted Answer · 2019-10-09 18:38:10Z

0

as @Shubh said you need to move the createElement inside the foreach loop. and create a new button element each time and append it to the li elements. because the variable button that you created at the beginnig is refering to the created element. each iteration you are just assigning it to another li node. so:

li.forEach(function(item){ 
      var button=document.createElement('button');
  button.appendChild(document.createTextNode('delete'));
  item.appendChild(button);
   });

answered Oct 9, 2019 at 18:38

rez shahr

493 bronze badges

Collectives™ on Stack Overflow

how to append the button to each <li> tag in javascript using forEach loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related