只有一个 <br> 元素被添加到 div 中。

Question

我试图在div元素中插入三个换行符，但只有一个到达了那里。

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

    }

这里的问题是什么？我该如何进行修正？

- Bikram Kumar

Answer 1

变量引用完全相同的节点

appendChild() 方法的参数 lnBreak 引用了完全相同的节点，因此它只是重复添加了已经创建的节点两次（请参见这个答案）。所以您需要克隆该节点，或者不使用变量引用该节点，或者渲染一个htmlString等。

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

在示例 #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>

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

- zer00ne

Answer 2

在appendChild函数中创建<br />标签。

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.appendChild(document.createElement("br"));
  para.appendChild(document.createElement("br"));
  para.appendChild(document.createElement("br"));
  para.appendChild(hyperlink);
  para.style.margin = "20px";
  document.getElementById("gamesList").appendChild(para);

}

insertNewGame("", "");

<div id="gamesList"></div>

- Dan Mullin