Unable to add all content to parent div inside a loop

Question

The array gets console logged fine, but only the last person of the array is inserted in the HTML <div>.

Why or what is the failure?

document.getElementById("team").addEventListener("click", show)
function show(){
    document.getElementById("fritz").style.display = "block";
    document.getElementById("bill").style.display = "block";
    document.getElementById("fran").style.display = "block";



    for (i = 0; i < people.length; i++) {

        var persoxn = people[i].printinfos()

        document.getElementById('insert_text').innerHTML = persoxn

        console.log(persoxn)
     }
}

(https://i.stack.imgur.com/HigAY.jpg) console

`document.getElementById('insert_text').innerHTML += persoxn` — 001, May 29 '20 at 17:32
https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — T to the J, May 29 '20 at 17:33

score 0 · Answer 1 · answered May 29 '20 at 17:38

You are overriding (replacing) the <div> content in each iteration, therefore all of the elements except the last one get overwritten.

Maybe you meant to use .insertAdjacentHTML():

    for (let i = 0; i < people.length; i++) {
        var person = people[i].printinfos();
        document.getElementById('insert_text').insertAdjacentHTML(person, "beforeend");
        console.log(person);
     }

Also don't forget to declare i inside the loop.

Unable to add all content to parent div inside a loop

1 Answers1