如何在 javascript 中动态添加 id 的列表项？

Question

我需要修复下面代码中的错误。 我想在单击按钮时将列表项添加到“ul”元素。 现在循环后，每次单击按钮时都会添加最后一项。 还有一件事，如何在单击一次按钮时上传所有三个项目“li”？ 谢谢你。

 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>

Answer 1

像这样使用 for each 以获得更好的可读性，我更喜欢使用 innerHTML 属性而不是 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>

Answer 2

您需要为每个名称创建一个新的li元素。

 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>

Answer 3

您需要创建3 个 li 节点，因此在您声明 li 的 function 中的第一行必须将 go 放入 for 循环中，最重要的是。