我从本地存储中检索数据数组。我希望将该数组显示为HTML元素集合
function getTodoItems() {
for (var i = 0; i < dataArray.length; i++) {
if (!dataArray[i].listItem.length) return;
var value = dataArray[i].listItem;
console.log(dataArray[i].listItem);
// What I tried, which showed the data, but I couldn't click on it.
// var itemList = document.getElementById("my-todo-list");
// var list = document.createElement("li");
// itemList.appendChild(list);
// list.innerHTML = dataArray[i].listItem;
}
}
getTodoItems();
答案 0 :(得分:1)
因此,我们的想法是迭代您的数据集合。在每次迭代时,您必须创建相关的HTML元素并将其插入容器中。
请注意以下示例是一个示例。出于性能原因,您可能希望“批量”插入。以同样的方式,可能有更好的替代方案来“清理”容器
const dataArray = ['foo', 'bar', 'baz']; //or coming from your local storage
const container = document.getElementById('container');
container.innerHTML = ''; //shortcut to remove every children elements
for (let item of dataArray){
const li = document.createElement('li')
li.textContent = item;
container.appendChild(li)
}
<ul id="container"></ul>