Can't append multiple elements when looping through a for loop

Question

I'm looping through an array. Each iteration, I set the value of a variable to the current index in the array and append it to a div in my HTML. However, only the last index is being appended to the div.

Here's my code:

for (var i = 0; i < pronouns.length; i++) {
     var para = document.createElement("P");
     para.innerHTML = pronouns[i];
     para.style = "display: inline-block";

     alert(pronouns[i])
     document.getElementById("main").appendChild(para);
     document.getElementById("main").appendChild(input);
     document.getElementById("main").appendChild(br);
}

pronouns is equal to: ['I','Me','You']. Can anyone help?

input and br are just other elements being added, that are declated outside of the for loop. their values never change. — benman, Feb 14 '21 at 11:12
`para.innerHTML = pronouns[i];` will assign whatever `pronouns[i]` refers to, *overwriting* the current `innerHTML` of `para`. You probably want `para.innerHTML = para.innerHTML + pronouns[i]`. — BenM, Feb 14 '21 at 11:15
Can you add definition of input and br? I have tested commenting these lines and it output `IMeYou` into div. — J.F., Feb 14 '21 at 11:16
@BenM that shouldn't change much as `para` is a newly created element — Nick Parsons, Feb 14 '21 at 11:17
Can you please create a [mre] so we can see the issue and help you debug it? Currently, it doesn't look as though your issues is reproducible: https://jsfiddle.net/3aw510d2/ — Nick Parsons, Feb 14 '21 at 11:21

J.F. · Accepted Answer · 2021-02-14T15:44:55.667

As asked in this question, the problem is you are using the same child, then is adding only one time.

Check how using this:

var pronouns = ['I','Me','You']
var br = document.createElement("br");
var input = document.createElement("input");

for (var i = 0; i < pronouns.length; i++) {
     var para = document.createElement("P");
     para.innerHTML = pronouns[i];
     para.style = "display: inline-block";

     document.getElementById("main").appendChild(para);
     document.getElementById("main").appendChild(input);
     document.getElementById("main").appendChild(br);
}

<div id="main"> </div>

It only adds one br and one input. To solve this you can create the childs into loop and will be added.

var pronouns = ['I','Me','You']

for (var i = 0; i < pronouns.length; i++) {
     var para = document.createElement("P");
     var br = document.createElement("br");
     var input = document.createElement("input");
     para.innerHTML = pronouns[i];
     para.style = "display: inline-block";

     document.getElementById("main").appendChild(para);
     document.getElementById("main").appendChild(input);
     document.getElementById("main").appendChild(br);
}

<div id="main"> </div>

Or use cloneNode()

var pronouns = ['I','Me','You']

var para = document.createElement("P");
var br = document.createElement("br");
var input = document.createElement("input");

for (var i = 0; i < pronouns.length; i++) {
     para.innerHTML = pronouns[i];
     para.style = "display: inline-block";

     document.getElementById("main").appendChild(para.cloneNode(true));
     document.getElementById("main").appendChild(input.cloneNode(true));
     document.getElementById("main").appendChild(br.cloneNode(true));
}

<div id="main"> </div>

score 2 · Answer 2 · answered Feb 14 '21 at 11:29

The input and br nodes you append should be clones of the already created nodes. Otherwise every iteration overwrites the previously appended node. Try something like:

const input = Object.assign(document.createElement("input"), {type: "text"});
const br = document.createElement("br");
const main = document.querySelector("#main");
const pronouns = ['I','Me','You'];

for (var i = 0; i < pronouns.length; i++) {
     const para = Object.assign(document.createElement("p"), {innerHTML: pronouns[i] + "&nbsp;"});
     para.style = "display: inline-block";
     main.appendChild(para);
     main.appendChild(input.cloneNode());
     //                     ^ clone the original
     main.appendChild(br.cloneNode());
}

<p id="main"></p>

score 2 · Answer 3 · answered Feb 14 '21 at 11:33

There can be several solutions to this based on your exact need, but if you want array value as paragraph and then input field and br element after that, simplest is this -

var pronouns = ['I','Me','You'];

for (var i = 0; i < pronouns.length; i++) {
  var para = document.createElement("P");
  var input = document.createElement("input");
  var br = document.createElement("br");

  para.style = "display: inline-block";
  para.innerHTML = pronouns[i];

  document.getElementById("main").appendChild(para);
  document.getElementById("main").appendChild(input);
  document.getElementById("main").appendChild(br);
}

<div id="main" />

Can't append multiple elements when looping through a for loop

3 Answers3