在JavaScriptfor循环中重复html元素

Question

我有一个地址数组，它由15个字符串类型的地址组成。我试图动态地创建html元素，重复到我的地址数组的长度。现在，我获取了写在html页面中的容器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);

Answer 1

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

html

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

JS-

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