如何使用 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

如果您的數據是一個對象數組，您可以在插入到 DOM之前遍歷它以生成 HTML。*

---

在這里，我使用了一個輔助函數來生成每個個人卡片 ( personCardHtml ) 的 HTML。 它返回一個模板文字，在 HTML 中的正確位置填充該人的詳細信息。

我在people數組上使用了Array.reduce來生成所有人物卡片的單個 HTML 字符串。

然后我使用insertAdjacentHTML將該 html 字符串插入<div id="persons-container"></div>

 const people = [{"name": "Henrietta Marsh","state": "Northern Mariana Islands","city": "Ernstville","zip": 7226},{"name": "Sandy Copeland","state": "Wyoming","city": "Hobucken","zip": 4594},{"name": "Logan Frank","state": "Puerto Rico","city": "Talpa","zip": 8670}] 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?text=${person.name}" 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> <!-- 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>

---

* 如果您希望頁面具有高性能，最好將 DOM 操作保持在最低限度。

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

使用純 javascript 你可以做到這一點。 演示： https : //codepen.io/ftj07/pen/KKppeaL

 <div class="row" id="designId"><div>

  <input type="button" onClick="generateList()" value="generateList" /> 
function generateList() {
  var personList = [
     { name: "Abc", state: "41", city: "USA", zip: "124" },
     { name: "Abc", state: "41", city: "USA", zip: "124" },
     { name: "Abc", state: "41", city: "USA", zip: "124" },
     { name: "Abc", state: "41", city: "USA", zip: "124" },
     { name: "Abc", state: "41", city: "USA", zip: "124" }
  ]
  let design = "";
  for(let item of personList){
    design += `
  <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>${item.name}</strong></h4>
   <h4>
    <small>${item.state}</small>
   </h4>
   <h4>
    <small>${item.city}</small>
   </h4>
   <h4>
    <small>${item.zip}</small>
   </h4>
  </div>  `
  }
  console.log("da",design)
  document.getElementById("designId").innerHTML  = design;
}

Answer 6

您可以在 js 中使用模板文字來解決您的問題。

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>JS Bin</title> </head> <body> <div id="root"></div> <script> let root = document.getElementById("root"); const persons = [ { name: "person1", state: "person1_state", city: "person1_city", zip: "person1_zip" }, { name: "person2", state: "person2_state", city: "person2_city", zip: "person2_zip" }, { name: "person3", state: "person3_state", city: "person3_city", zip: "person3_zip" }, { name: "person4", state: "person4_state", city: "person4_city", zip: "person4_zip" } ]; const renderPerson = persons => { let data = ``; persons.forEach(person => { data += ` <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 --> </div>`; }); return data; }; root.innerHTML = renderPerson(persons); </script> </body> </html>