Ordnen Sie eine Datensammlung HTML-Elementen zu

Question

Ich erhalte ein Array von Daten aus dem lokalen Speicher. Und ich wünsche

das Array als HTML-Elemente Sammlung anzuzeigen

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

So ist die Idee wäre, über Ihre Datensammlung iterieren. Bei jeder Iteration müssten Sie das relevante HTML-Element erstellen und es in den Container einfügen.

Beachten Sie, dass das folgende Beispiel ein Beispiel ist. Möglicherweise möchten Sie die Einfügung aus Leistungsgründen "Batch". In gleicher Weise könnte es bessere Alternativen zu „reinigen“, um den Behälter

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>