how to create more than one element in the DOM with js using a for loop?

Question

Well, the result I want to get is my div element should have the same numbers of p elements as the array.

In order to do this, I tried using a for loop but it just create one p element, so I didn't work.

Anyone have idea how to do this? (I'm just learning js).

const diccionario = () => {
    var dama = ["bird:pajaro", "car:carro", "house:csa", "camis"];

    document.getElementById("dic").addEventListener("click", () => {
        var pes = document.createElement("p");
        for(var i = 0;  i < dama.length; i++){
            pes.innerHTML = dama[i];
            document.getElementById("cuadro").appendChild(pes);     
        }
    })
}

Move the var pes line 1 line down (inside the for loop) and you are good to go. — Luuk Skeur
– Luuk Skeur, Commented Mar 12, 2020 at 9:31

CertainPerformance · Accepted Answer · 2020-03-12 06:11:15Z

2

You need to create the element inside the loop. If you create it outside the loop, then when you call appendChild, it will get removed from wherever it was previously in the DOM:

const diccionario = () => {
    var dama = ["bird:pajaro", "car:carro", "house:csa", "camis"];

    document.getElementById("dic").addEventListener("click", () => {
        for(var i = 0;  i < dama.length; i++){
            var pes = document.createElement("p"); // <----------------
            pes.innerHTML = dama[i];
            document.getElementById("cuadro").appendChild(pes);     
        }
    })
}

appendChild doesn't create a copy of the existing element - rather, it just appends the existing element.

answered Mar 12, 2020 at 6:11

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Maheer Ali Over a year ago

If someone create element outside and clone it inside using cloneNode rather than using createElement will it increase performance?

CertainPerformance Over a year ago

I tried it, but I don't see a noticeable difference.

CertainPerformance Over a year ago

@Kenny When an answer solves your problem, you may consider marking it as Accepted (check the checkbox on the left) to indicate that the issue is resolved :)

Collectives™ on Stack Overflow

how to create more than one element in the DOM with js using a for loop?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related