.append() vs .html() in forEach loop

Question

I'm, struggling a little bit trying to understand the way .append and .html works. I have this code which generates a new <li> element when clicking a button:

The way that it's written below works fine. The thing is that if instead of .html() I use .append() it add a new <li> plus all the others, not just ONE <li>

Can someone explain to me why does it happen? Thanks in advance :)

const showTask = () =>{
    let itemHtml = "";
    toDoList.forEach((item, index)=>{
        
        itemHtml += 
            `<li class="item ${item.isCompleted == true ? " item-is-done" : ""}" id="${index}"><input type="checkbox" class="checkbox"><span>${item.task}</span>               
                <button type="button" class="remove" onClick="deleteTask(${index})"><i class="bi bi-trash" id="remove-btn"></i></button>
            </li>`;
    });

    $(".list").html(itemHtml);
};

`.html()` replaces all the existing content in `.list`. `.append()` does not — Phil, Sep 08 '21 at 02:17
Already exists answer https://stackoverflow.com/q/3015335/6099811 — navnath, Sep 08 '21 at 02:23

score 0 · Answer 1 · answered Sep 08 '21 at 02:19

0

.html() overwrites everything of your .list.

.append() adds the element at the end of your .list.

answered Sep 08 '21 at 02:19

Jakob

1,858
2
15
26

score 0 · Answer 2 · answered Sep 08 '21 at 02:26

0

html function remove previous data and write new one you should use append to keep previews

and add new one

answered Sep 08 '21 at 02:26

amir najafi

54
4

.append() vs .html() in forEach loop

2 Answers2