Only one <br> element is appended in the div

Question

I am trying to insert three line breaks in the division element, but only one is getting there.

    function insertNewGame(linkOfGame, imageOfGame) {
      var para = document.createElement("div");
      var image = new Image(300, 450);
      var hyperlink = document.createElement("a");
      var lnBreak = document.createElement("br");
      
      image.src = imageOfGame;
      hyperlink.innerHTML = "Play Now";
      hyperlink.href = linkOfGame;
      
      para.appendChild(image);
      para.appendChild(lnBreak);
      para.appendChild(lnBreak);
      para.appendChild(lnBreak);
      para.appendChild(hyperlink);
      para.style.margin = "20px";
      document.getElementById("gamesList").appendChild(para);

    }

What is the problem here? How can I correct it?

Answer 1

Variable Referencing the Exact Same Node

appendChild() parameter lnBreak is the same node so it just takes that exact node that was created and re-appends 2 more times (see this answer). So you'll need to clone the node, or don't reference the node with a variable, or render an htmlString, etc.

In Demo #1 the node lnBreak is appended then it's cloned and appended two more times.

para.appendChild(lnBreak);
para.appendChild(lnBreak.cloneNode(true));
para.appendChild(lnBreak.cloneNode(true));

Demo #1

function insertNewGame(linkOfGame, imageOfGame) {
  var para = document.createElement("div");
  var lnBreak = document.createElement('br');
  var image = new Image(300, 450);
  var hyperlink = document.createElement("a");
  image.src = imageOfGame;
  hyperlink.innerHTML = "Play Now";
  hyperlink.href = linkOfGame;
  para.appendChild(image);

  para.appendChild(lnBreak);
  para.appendChild(lnBreak.cloneNode(true));
  para.appendChild(lnBreak.cloneNode(true));

  para.appendChild(hyperlink);
  para.style.margin = "20px";
  document.getElementById("gamesList").appendChild(para);
}

insertNewGame('about:blank', 'https://via.placeholder.com/150/150');

<section id='gamesList'></section>

---

In Demo #2 a for loop is added and the .createElement() method is invoked without a variable.

for (let i=0; i < 3; i++) {
  para.appendChild(document.createElement('br'));
}

Demo #2

function insertNewGame(linkOfGame, imageOfGame) {
  var para = document.createElement("div");
  var image = new Image(300, 450);
  var hyperlink = document.createElement("a");
  image.src = imageOfGame;
  hyperlink.innerHTML = "Play Now";
  hyperlink.href = linkOfGame;
  para.appendChild(image);

  for (let i = 0; i < 3; i++) {
    para.appendChild(document.createElement('br'));
  }

  para.appendChild(hyperlink);
  para.style.margin = "20px";

document.getElementById("gamesList").appendChild(para);
}

insertNewGame('about:blank', 'https://via.placeholder.com/150/150');

<section id='gamesList'></section>

---

In Demo #3 a htmlString is rendered into real HTML

para.insertAdjacentHTML('beforeEnd', `<br><br><br>`);

Demo #3

function insertNewGame(linkOfGame, imageOfGame) {
  var para = document.createElement("div");
  var image = new Image(300, 450);
  var hyperlink = document.createElement("a");
  image.src = imageOfGame;
  hyperlink.innerHTML = "Play Now";
  hyperlink.href = linkOfGame;
  para.appendChild(image);

  para.insertAdjacentHTML('beforeEnd', `<br><br><br>`);

  para.appendChild(hyperlink);
  para.style.margin = "20px";
  document.getElementById("gamesList").appendChild(para);

}

insertNewGame('about:blank', 'https://via.placeholder.com/150/150');

<section id='gamesList'></section>