How to display or map localforage iterations to html element <p>

Question

window.addEventListener("load", function () {

         document.getElementById("btnList").addEventListener("click", function () {
                    
             localforage.iterate((value, key, iterNum) => {
                 const lisst = [key, value]
                 document.getElementById('jstext').innerText = lisst
                 console.log(lisst) //log shows all of the added items
                                    //but lisst.length === 2
                                    //what am I missing?
         });
     }

<button id="btnList">List Values</button>
<div id="jstext">
</div>

Hello! What I am attempting to do here is display all of the different items that have been added to my localforage list. When I log to console, all of the items that have been added are displayed in console, but when I attempt to display the entire list in my <div> element, or even a <p> element, only ONE item (the last item entered) shows up on the webpage in the element.
So my question is: How do I display every item in my HTML element, and where am I going wrong that I am only showing the most recently entered item to localforage?

Answer 1

The reason you're only seeing the last item is because you're setting the innerText of the element on every iteration.

In your case, you probably want to append the item to the innerText of the element using the addition assignment operator:

document.getElementById("jstext").innerText += lisst