How to dynamically add list items with id in javascript?

Question

I need to fix a bug in the code below. I would like to add list items to 'ul' element while clicking the button. Now after looping it adds the last item every time the button is clicked. And another thing, How to upload all three items "li" while clicking the button once? Thank you.

let readId = [{id: 1, name: "John"}, {id: 2, name: "James"}, {id: 3, name: "Tom"}]
let ul = document.getElementById("root");

function createItems() {
  let li = document.createElement("li");
  
  for (let i = 0; i < readId.length ; i++) {
   li.setAttribute("id", readId[i].id)
   li.innerHTML = readId[i].name;
    ul.appendChild(li);
  }
}

<button onclick="createItems()">add item</button>
<ul id="root">
</ul>

If this is a task for college or tutorial that is fine. Otherwise use a framework like jquery, vue or angular — Dalorzo
– Dalorzo, Commented Jun 9, 2020 at 19:42
Move let li = document.createElement("li"); into your loop — j08691
– j08691, Commented Jun 9, 2020 at 19:45

Saadi Toumi Fouad · Accepted Answer · 2020-06-09 19:50:17Z

1

Use a for each like this for better readability and I prefer using innerHTML property instead of createElement(), setAttribute...

let readId = [{id: 1, name: "John"}, {id: 2, name: "James"}, {id: 3, name: "Tom"}],
  ul = document.getElementById("root");

function createItems() {
  readId.forEach(function(li) {
    ul.innerHTML += `<li id="${li.id}">${li.name}</>`;
  });
}

<button onclick="createItems()">add item</button>
<ul id="root">
</ul>

answered Jun 9, 2020 at 19:50

Saadi Toumi Fouad

2,8322 gold badges7 silver badges20 bronze badges

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

Comments

Gerard · Accepted Answer · 2020-06-09 19:46:13Z

0

You need to create a new li element for each name.

let readId = [{id: 1, name: "John"}, {id: 2, name: "James"}, {id: 3, name: "Tom"}]
let ul = document.getElementById("root");

function createItems() {
  for (let i = 0; i < readId.length ; i++) {
    let li = document.createElement("li");
    li.setAttribute("id", readId[i].id)
    li.innerHTML = readId[i].name;
    ul.appendChild(li);
  }
}

createItems();

<ul id="root"></ul>

answered Jun 9, 2020 at 19:46

Gerard

15.8k5 gold badges33 silver badges53 bronze badges

1 Comment

Magda Aderibigbe Over a year ago

Great. Thank you!

Dalorzo · Accepted Answer · 2020-06-22 20:55:56Z

0

You need to create 3 li nodes, so the first line in your function where you declare li must go into the for loop, on top of all.

edited Jun 22, 2020 at 20:55

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

answered Jun 9, 2020 at 19:47

v-moe

1,4431 gold badge13 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to dynamically add list items with id in javascript?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related