java后端list集合中的数据怎么传递到前端div中显示？前端html不是js,动态增加div（非表格）

Question

如图所示，我想查看某个对象在数据库中的所有数据展示在前端，动态加载div（多少条数据加载几个div），目前查到的方法也只是前端采用

<c:forEach items="${list}" > 

结合javascript，可是c:forEach适用于.js我的项目都是.html，还有适用于表格的

<tr th:each="image:${list}">

表格的样式不符合项目需求，请问spring作为后端，html作为前端，且适用于动态增加div显示数据，有什么方法能做到？

Answer 1

可以使用JavaScript来动态创建和添加HTML元素，并将从后端获取的数据填充到这些元素中。
在你的HTML页面中，可以创建一个空的容器元素，例如：

<div id="data-container"></div>

然后，使用JavaScript获取从后端传递过来的数据，并使用循环将每个数据项添加到容器中：

<script>
  // 假设从后端获取的数据存在名为 data 的变量中
  var data = ${list};

  // 获取容器元素
  var container = document.getElementById("data-container");

  // 循环遍历数据，并为每个数据项创建一个 div 元素
  for (var i = 0; i < data.length; i++) {
    var div = document.createElement("div");

    // 向 div 元素中添加数据
    var img = document.createElement("img");
    img.src = data[i].imageUrl; // 假设数据项中包含一个名为 imageUrl 的属性，用于显示图片
    div.appendChild(img);

    // 添加其他数据到 div 元素中
    // ...

    // 将 div 元素添加到容器中
    container.appendChild(div);
  }
</script>

这将创建一个或多个包含数据的 div 元素，并将它们添加到容器中以供显示。你可以根据需要使用CSS样式来设置这些元素的布局和外观。