'How to print each array element on a new row

I am getting a new array element from an input and adding to array but I can not print every element in a new row. I can print all elements of array in one row but can not print every element in a different row. I am using <br> after array name but does not work. What is your solution? It is like a todo list project.

var allmembers = [""];

function addnewmember() {
  var newmemberr = document.getElementById("newmember").value;

  allmembers.push(newmemberr);

  for (var i = 0; i < allmembers.length; i++) {
    document.getElementById("membername").innerHTML = allmembers[i] + "<br>";
  }
}

<html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stil.css">
</head>

<body>
  <input id="newmember" placeholder="NEW MEMBER"><br>
  <button type="button" onclick="addnewmember()">SEND</button>
  <div id="members">MEMBERS</div>
  <div id="membername"></div>
</body>

</html>

Solution 1:^[1]

Your solution is appending a <br> to the end of the array, rather than between array items. Instead of looping over the array, just use the .join() method, which is ideal for something like this.

Additionally, using innerHTML in a loop is a big performance "no no" as it causes the browser to have to repaint and possibly reflow the DOM document repeatedly. In such cases, you should build up a string that contains the HTML you want and after the loop is done set that string as the innerHTML of the desired element in one single command. And really, the use of innerHTML should be avoided if at all possible because of security concerns as well.

See additional comments inline:

let allmembers = [];

// Get your DOM references just once, not every time the function runs
// Make references to DOM elements, rather than their propreties. This
// way, if you decide you need access to a different DOM element property
// you don't have to scan for the element again.
let newmember = document.getElementById("newmember");
let memberName =  document.getElementById("membername");

function addnewmember() {
  allmembers.push(newmember.value);
  newmember.value = "";  // Clear out the input
  
  // No need for a loop. Just join the arry elements
  // with a <br> between them.
  memberName.innerHTML = allmembers.join("<br>");
}

<html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stil.css">
</head>

<body>
  <input id="newmember" placeholder="NEW MEMBER"><br>
  <button type="button" onclick="addnewmember()">SEND</button>
  <div id="members">MEMBERS</div>
  <div id="membername"></div>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'How to print each array element on a new row

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]