Question

我从本地存储中检索数据数组。我希望将该数组显示为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();

https://jsfiddle.net/headbangz/2odzuc72/

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

将数据集合映射到HTML元素

1 个答案: