I can't render out my local storage items

[summer trout]

I see a couple of different issues with this current code. Let's start at the main issue, which is that you're only seeing the last item in the list of leads. I'm going to assume that you understand where in general the issue might be. But if not, take a moment to ponder where it might be (spoiler: ||the renderLeads() function||).

Then take a closer look at that code. You have three distinct sections: 1) some stuff you do once initially, 2) a loop that iterates each of the leads, and 3) some stuff you do once afterwards. Given what you want/expect that code to be doing, ask yourself if the code in each of those sections is in the proper place. Is the code that is executed only once really meant to be done only once? Or should it perhaps be moved elsewhere?

[ocean hull]

Yes you are right. I replaced the codes inside renderLeads() function with innerHTML one and it worked properly but I am still looking for the solution what I need to do

[summer trout]

Yes, I understand what you did before, and how you're trying to change it to a different approach.

Is the code that is executed only once really meant to be done only once? Or should it perhaps be moved elsewhere?
Did you see these questions in my first response and how would you answer them?

[ocean hull]

In my renderLeads() function I created elements. I added attributes to my elements. After that I created for loop for my a.innerText so that I can render out all anchor elements I created with the input I pushed into myLeads array. Same thing was also applied to a.href so that I can click on it and I can see the website. outside the for loop I appended anchor and i element to list element. When list element is ready I appended it to unordered list element. I still don't understand why it is a wrong approach. I checked your questions and I have same questions on my mind but I still couldn't find the solution

[summer trout]

I think it helps to envision (or even write down in a notebook somewhere) what the eventual HTML structure will look like. In this case, because you know that whatever you build in code will end up inside of a <ul> block, you would be probably envision something like this, correct?

<ul>
  
    <!-- build this for first lead -->
    <li>
        <a href="#">lead 1</a>
        <i class="fa-solid fa-trash-can"></i>
    </li>
    
    
    <!-- build this for second lead -->
    <li>
        <a href="#">lead 2</a>
        <i class="fa-solid fa-trash-can"></i>
    </li>
    
</ul>

Because this is what a proper <ul> with child <li> elements should look like, yes.

And if you had a third lead in your array of leads, you would need to add another <li> element that looked like this, correct?

    <!-- build this for third lead -->
    <li>
        <a href="#">lead 2</a>
        <i class="fa-solid fa-trash-can"></i>
    </li>

Because this is what a single lead should look like, in <li> form, correct?

Well, since each lead that is added to the <ul> as a newly-created <li> needs to looks like this ^, that means that all of the elements that compose the <li> element (the <li> element itself, plus the child <a> and <i> elements), must be create for each lead in the leads array. Hopefully the wording here points you in the right direction as to why the current code it not working, and how to fix it. Spoiler: ||All of the the document.createElement() calls need to be inside of the for loop, as they need to be performed on every leads that you want to add to the <ul>.||

[ocean hull]

I was busy with it and I finally came up something like this: https://scrimba.com/scrim/c2aWy8Ua

However I don't understand why I was supposed to write leadString += <li>${li.innerHTML}</li>; instead of writing leadString += li.innerHTML; --- If I write like the second one, it doesn't show <li> tags on console log.