时间戳

首页 > 解决方案 > 动态添加

javascript - 动态添加

问题描述

我想在动态添加<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>

它必须是简单的，但我看不出是什么。我究竟做错了什么？谢谢！

PS：如果您对我的代码还有其他建议，我愿意接受。所以请随时给我任何反馈。

编辑：为澄清起见：显示了所有元素，但一个在彼此之上，而不是我想要的一个在彼此之下。

Edit2：添加了更多代码。

标签： javascript

解决方案

我想这是创建 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 = [];
  }
}

推荐阅读