JavaScript How to create elements into each created element?

Question

I'm trying to put a content div into each parent div, but this way it puts all the content divs to the first parent div, not each parent div. I've tried to do it in 2 for loops, tried forEach, but just can't figure it out.

        for (let i = 0; i < 5; i++) {
           const parent = document.createElement("div");
           parent.classList.add("parent");
           parent.setAttribute("id","parent");
           document.getElementById("container").appendChild(parent);
           const content = document.createElement("div");
           content.classList.add("content");
           document.getElementById("parnet").appendChild(content);
        }

Ty for your answer

you are giving all the parents the same ID. Try to make them different, eg by using `parent_${i}` — Robin Zigmond
– Robin Zigmond, Commented May 14, 2022 at 12:00

Emiel Zuurbier · Accepted Answer · 2022-05-14 12:02:01Z

1

You're using id's to select your parents with. But you can't have multiple elements with the same id value. getElementById will also look for the first occurence of the id, so you will always get the first parent element.

Besides that, you already have a reference to the parent in your parent variable. No need to look it up again, just use the reference you already have.

const container = document.getElementById("container");

for (let i = 0; i < 5; i++) {
  const content = document.createElement("div");
  content.classList.add("content");

  const parent = document.createElement("div");
  parent.classList.add("parent");

  parent.append(content);
  container.append(parent);
}

answered May 14, 2022 at 12:02

Emiel Zuurbier

21.2k3 gold badges25 silver badges36 bronze badges

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

1 Comment

peckan09 Over a year ago

Thank you! I really didn't realize that I can only use id once, I was so focused on how to add a child to each

Collectives™ on Stack Overflow

JavaScript How to create elements into each created element?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related