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 函数中创建 <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>

Answer 2

引用完全相同节点的变量

appendChild() 参数 lnBreak 是同一个节点，所以它只需要创建的那个节点并重新追加 2 次（参见）。所以你需要克隆节点，或者不使用变量引用节点，或者渲染 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>

在 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>

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

Only one <br> element is appended in the div

html

javascript

css

function

createelement

引用完全相同节点的变量

演示#1

演示#2

演示 #3