在 JavaScript for 循环中重复 html 元素答案

【问题标题】：Repeat html elements inside of a JavaScript for loop在 JavaScript for 循环中重复 html 元素
【发布时间】：2020-11-18 01:53:49
【问题描述】：

我有一个包含 15 个字符串类型地址的地址数组。我正在尝试动态创建重复到我的地址数组长度的html元素。现在，我抓取了在我的 html 页面中编写的 container-lg 类，创建了一个 div 元素并将类添加到动态创建的 div 中。

html
<div class="container-lg">
</div>

JS
let container = document.querySelector(".container-lg")
let div = document.createElement("div");
div.classList.add("card", "card-body", "mb-3");

然后我添加了一个以地址数组为条件的 for 循环。我用反引号定义了 div.innerHTML，希望 div 会重复 15 次（与我的数组的长度相同），但是在将 div 附加到容器后，我只在我的 for 循环中创建了一次 div。我知道我错过了一两步，但我似乎无法弄清楚为什么我不能让 div 元素重复。

for (let i = 0; i <= addresses.length; i++) {
  console.log(addresses[i]);
  div.innerHTML = `<div class="mx-auto" style="width: 500px; margin-top:50px;">
  <div class="input-group">
     <div class="input-group-prepend">
        <span class="input-group-text">Starting Address</span>
     </div>
     <input class="form-control" type="text" placeholder="Start Address" id="startaddress">
  </div>
  <br/>
  <div class="input-group">
     <div class="input-group-prepend">
        <span class="input-group-text">Destination Address</span>
     </div>
     <input class="form-control" type="text" placeholder="Destination Address" id="destAddress">
  </div>
  <hr/>
  <div class="card" style="width: 18rem;">
     <div class="card-body">
        <h5 class="card-title">Distance <span id="distance"></span></h5>
     </div>
  </div>
  <br/>
  <div class="card" style="width: 18rem;">
     <div class="card-body">
        <h5 class="card-title">Trip Time <span id="time1"></span></h5>
     </div>
  </div>
</div>`;
container.appendChild(div);

【问题讨论】：

您似乎只创建了一个div 元素，并且多次将其附加到容器中。一个元素只能在 DOM 中存在一次。您需要在每次迭代时创建一个新的div，或者将所有内容附加到那个 div，然后在循环后将该 div 附加到容器
使用div.innerHTML += yourthing（加等号）将新内容附加到现有内容而不是覆盖它。然后将您的 appendChild 移到循环之外。

标签： javascript html for-loop createelement

【解决方案1】：

您只需创建一个 div 元素并在 for 循环中更改其 innerHTML。您必须在 for 循环中创建 div 元素

html

<div class="container-lg"></div>

let container = document.querySelector(".container-lg");
for (let i = 0; i <= addresses.length; i++) {
  let div = document.createElement("div");
  div.classList.add("card", "card-body", "mb-3");
  console.log(addresses[i]);
  div.innerHTML = `<div class="mx-auto" style="width: 500px; margin-top:50px;">

  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">Starting Address</span>
    </div>
    <input class="form-control" type="text" placeholder="Start Address" id="startaddress">
  </div>
  <br />
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">Destination Address</span>
    </div>
    <input class="form-control" type="text" placeholder="Destination Address" id="destAddress">
  </div>
  <hr />
  <div class="card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Distance <span id="distance"></span></h5>
    </div>
  </div>
  <br />
  <div class="card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Trip Time <span id="time1"></span></h5>
    </div>
  </div>`;
      container.appendChild(div);
    }

【讨论】：