javascript - div 中仅附加了一个 <br> 元素

Question

我试图在除法元素中插入三个换行符，但只有一个换行符。

    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);

    }

这里有什么问题？我该如何纠正它？

Answer 1

引用完全相同节点的变量

appendChild() 参数 lnBreak 是同一个节点，所以它只需要创建的确切节点并重新追加 2 次(参见 answer) .因此，您需要克隆节点，或者不使用变量引用节点，或者呈现 htmlString 等。

在 Demo #1 中，节点 lnBreak 被附加，然后被克隆并再附加两次。

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

演示#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>

---

在 Demo #2 中，添加了一个 for 循环，并在没有变量的情况下调用了 .createElement() 方法。

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

演示#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>

---

在 Demo #3 中，htmlString 被渲染成真正的 HTML

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

演示#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>