如何使用JS动态创建此html元素

Question

我想创建此布局，动态创建它的列表，从数据库中获取数据并填充。

这是布局的代码：

<div class="card-body">
  <!-- person -->
  <div class="row" id="img_div">
    <div class="col-12 col-sm-12 col-md-2 text-center">
      <img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80">
    </div>
    <div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
      <h4 class="product-name"><strong>Person Name</strong></h4>
      <h4>
        <small>state</small>
      </h4>
      <h4>
        <small>city</small>
      </h4>
      <h4>
        <small>zip</small>
      </h4>
    </div>
    <div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row">


    </div>
  </div>
  <!-- END person -->
  <!-- person -->
  <div class="row" id="img_div">
    <div class="col-12 col-sm-12 col-md-2 text-center">
      <img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80">
    </div>
    <div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
      <h4 class="product-name"><strong>Person Name</strong></h4>
      <h4>
        <small>state</small>
      </h4>
      <h4>
        <small>city</small>
      </h4>
      <h4>
        <small>zip</small>
      </h4>
    </div>
    <div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row">

    </div>
  </div>
  <!-- END person -->
</div>

回顾一下，我想动态复制“人”布局以填充数据库数据

有没有可以执行此工作的Javascript库？

Answer 1

如果您的数据为JSON格式，则可以在将其插入DOM之前遍历一系列人员为您生成HTML。

const people = [{name: 'Person 1',state: 'State 1',city: 'City 1',zip: 'ZIP 1',},{name: 'Person 2',state: 'State 2',city: 'City 2',zip: 'ZIP 2',},{name: 'Person 3',state: 'State 3',city: 'City 3',zip: 'ZIP 3',},]

const personCardHtml = (person) => {
  return `<div class="card-body">
  <!-- person -->
  <div class="row" id="img_div">
    <div class="col-12 col-sm-12 col-md-2 text-center">
      <img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80">
    </div>
    <div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
      <h4 class="product-name"><strong>${person.name}</strong></h4>
      <h4>
        <small>${person.state}</small>
      </h4>
      <h4>
        <small>${person.city}</small>
      </h4>
      <h4>
        <small>${person.zip}</small>
      </h4>
    </div>
    <div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row"></div>
  </div>
  <!-- END person -->`
}
const reducer = (accumulator, currentValue) => accumulator + personCardHtml(currentValue);
const personsHtml = people.reduce(reducer, '')
const container = document.querySelector('#persons-container')
container.insertAdjacentHTML('beforeend', personsHtml);

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

Answer 2

您可以使用for循环将HTML附加到您选择的元素上。循环中的i是从数据库接收到的元素的大小

for(let i=1;i<10;i++)
{
document.querySelector('.card-body').innerHTML+=`<div class="row" id="img_div">
    <div class="col-12 col-sm-12 col-md-2 text-center">
      <img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80">
    </div>
    <div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
      <h4 class="product-name"><strong>Person`+i+`</strong></h4>
      <h4>
        <small>state</small>
      </h4>
      <h4>
        <small>city</small>
      </h4>
      <h4>
        <small>zip</small>
      </h4>
    </div>
    <div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row">
    </div>
  </div>
 `
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card-body">
  <!-- person -->
  </div>

Answer 3

我将生成与您在上图中提到的设计相同的设计。在文件中添加CSS。动态javascript创建多个数据。

$(document).ready(function(){
  
  for(i=0;i<10;i++){
  $("#allPerson").append(`<div class="row" id="img_div">
    <div class="col-12 col-sm-12 col-md-2 text-center person">
      <img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80">
    </div>
    <div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6 div">
      <h4 class="product-name"><strong>Person Name</strong></h4>
      <h4>
        <small>state</small>
      </h4>
      <h4>
        <small>city</small>
      </h4>
      <h4>
        <small>zip</small>
      </h4>
    </div>
    <div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row">
  </div>
  </div>`);
  }
  
});

.person{
  float:left;
  margin-right:10px;
}
#img_div{
  width:100%;
  margin:10px;
  float:left;
}
h4{
  margin:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="card-body" id="allPerson">
  <!-- person -->

  <!-- END person -->
  <!-- person -->

  <!-- END person -->
  
</div>

Answer 4

使用以下代码创建动态元素并将属性添加到该元素。

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>
</head>
<body>

<p>Click the button to create a P element with some text, and append it to DIV.</p>

<div id="myDIV">
A DIV element
</div>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var para = document.createElement("P");
  para.innerHTML = "This is a paragraph.";
  document.getElementById("myDIV").appendChild(para);
}
</script>

</body>
</html>

Answer 5

您可以使用类似jquery的库来实现此目的。这是一个解释如何使用jquery动态创建表的链接：https://codebun.com/create-dynamic-table-using-jquery/

否则，您可以使用类似Angular的框架。