Question

我想在动态添加的<br>之后动态添加一个<div>元素。即使在代码中添加了<br>（我在Chrome中的Elements下看到了它），该行也不会出现在屏幕上。这是我的代码：

let guests = document.createDocumentFragment();
let k = 0;
let name = [];
for(let j = 0; j < compositions[i].guests.length; j++){
  var br = document.createElement("br");
  let divElement = document.createElement("div");

  if(compositions[i].guests[k] != ";"){
    name.push(compositions[i].guests[k]);
    k++;
}
  else {
    k = k + 2;
    divElement.innerHTML = name.join('');
    divElement.setAttribute("class", "guestsDiv");
    divElement.setAttribute("id", "guestsDiv");
    divElement.setAttribute("style", "color:" + compositions[i].textColor);
    guests.appendChild(br);
    guests.appendChild(divElement);
    //$('#guests').append('New Line<br>');
    name = [];
  }
}

这是CSS：

.guestsDiv{
   position: absolute;
   display: none;
   top: 16.5vw;
   left: 59.5vw;
   max-width: 2px;
   font-size: 2vw;
   line-height: 98%;
   word-wrap: normal;
   font-family: 'Quicksand', sans-serif;
 }

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/config.css">
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/config.js" defer></script>
  <script src="js/main.js" defer></script>

</head>

<body>
  <input type="text" class="config" id="backgroundImage" name="lname" placeholder="Background Image">
  <br>
  <input type="text" class="config" id="animation" name="lname" placeholder="Animation">
  <br>
  <input type="text" class="config" id="textColor" name="lname" placeholder="Text Color">
  <br>
  <input type="text" class="config" id="overlay" name="lname" placeholder="Overlay">
  <br>
  <input type="text" class="config" id="startDate" name="lname" placeholder="Start Date">
  <br>
  <input type="text" class="config" id="endDate" name="lname" placeholder="End Date">
  <br>
  <input id="clickMe" type="button" value="Enter values" onclick="configComp();"/>

  <img id="setBackground">
  <img id="logo">
  <div id="rectangle"></div>
  <div id="smallRectangle"></div>
  <div id="welcomeFirstLine" style="position:absolute"></div>
  <div id="welcomeSecondLine" style="position:absolute"></div>
  <div id="emptyText" style="position:absolute"></div>
</body>

<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2/velocity.ui.min.js'></script>

</html>

必须很简单，但我看不到。我究竟做错了什么？谢谢！

P.S .：如果您对我的代码还有其他建议，我可以接受。因此，请随时给我任何反馈。

编辑：为澄清起见：显示了所有元素，但一个元素在彼此的顶部，而另一个在我想要的下方。

Edit2 ：添加了更多代码。

Answer 1

我想这与创建br元素有关。问题是您在循环中每次都使用相同的br元素，这意味着dom每次在整个循环中的不同位置（这是在新的div之前）都使用它。

因此，您可以每次克隆br元素或创建一个新元素，如：

let guests = document.createDocumentFragment();
let k = 0;
let name = [];
var br = document.createElement("br"); //<-- Outside, to avoid redeclaration.
for(let j = 0; j < compositions[i].guests.length; j++){

  let divElement = document.createElement("div");

  if(compositions[i].guests[k] != ";"){
    name.push(compositions[i].guests[k]);
    k++;
}
  else {
    k = k + 2;
    divElement.innerHTML = name.join('');
    divElement.setAttribute("class", "guestsDiv");
    divElement.setAttribute("id", "guestsDiv");
    divElement.setAttribute("style", "color:" + compositions[i].textColor);
    guests.appendChild(br.cloneNode()); // <-- Here cloneNode() creates a new clone of br each time.
    guests.appendChild(divElement);
    //$('#guests').append('New Line<br>');
    name = [];
  }
}

动态添加<br/>

1 个答案: