如何克隆div并更改克隆div内的HTML数据

Question

我在这上面花了很多时间，但还是没能弄清楚。我有一个名为box的div，我想克隆它。目前，我在html页面一次又一次地编写代码，用于10个盒子，并将其数据放在里面。我现在明白，这不是正确的做法，因为代码变得非常长。我想要的是克隆的盒子里有不同的数据。例如，第1框内的标题和数据应该与第2框内的不同，等等。

我试过的:我试过使用JQuery通过使用.clone()函数在一个for循环。效果很好，但我无法访问克隆元素。请提供一个例子，因为我对这个很陌生，浪费了很多时间。

主要目标:消除重写HTML代码的盒子(例如。如果我有10个盒子)，但是在10个盒子里有不同的数据。例如标题，在类图标栏2..请帮帮我。谢谢你! !

<div class="box" id="box">
<div class="container">
<div class="header">
<h3 id="Trailer_name"></h3>
</div>
<div class="img-container" id="image_container">
<iframe
style="width: 15vw; height: 18vh"
frameborder="0"
src="map.php"
></iframe>
</div>
<form method="post">
<p>
<button type="button" class="button3">
<ion-icon class="icon2" name="contrast-outline"></ion-icon>
LIGHTS
</button>
<a href=""><button class="button">ON</button></a>
</p>
</form>
<form method="post">
<p>
<a href=""><button type="button" class="button2">OFF</button></a>
</p>
</form>
<div class="icon-bar">
<a class="active" href="#">Solar PV</a>
<a class="active" href="#">Battery </a>
<a class="active" href="#">Power</a>
<a class="active" href="#">Video</a>
</div>
<div class="icon-bar2">
<a class="active" href="#"> 48 </a>
<a class="active" href="#">250 V</a>
<a class="active" href="#">1.5KW</a>
</div>
</div>
</div>

Answer 1

您可以使用jquery循环并将数据保存在数组中。现在，当循环运行时，数据将填充在div

中

var things = ["Solar PV", "Battery","Power","Video"];
for (var i = 0; i < things.length; i++) {
$("<div>"+things[i]+"</div>").appendTo("#inserts");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="inserts">

</div>