Как динамически создать эти HTML элементы, используя JS - PullRequest
Новая
       8

Как динамически создать эти HTML элементы, используя JS

0 голосов
/ 11 февраля 2020

enter image description here Я хочу создать этот макет, динамически создать его список, получить данные из базы данных и заполнить.

Вот код макета: 

<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>

Напомним, я хочу динамически реплицировать макет "person" для заполнения данными базы данных

Есть ли какая-либо библиотека Javascript, которая может выполнить работа?

Ответы [ 6 ]

3 голосов
/ 11 февраля 2020

Если ваши данные представляют собой массив объектов, вы можете выполнить итерацию по ним для генерации HTML до вставки в DOM. *

Здесь я использовал вспомогательная функция для генерации HTML каждой карты отдельного человека (personCardHtml). Он возвращает шаблонный литерал , который заполняет данные человека в правильном месте в HTML.

Я использовал Array.reduce в массиве people для генерации одной строки HTML из всех карточек персонажа вместе.

Затем я использовал insertAdjacent HTML, чтобы вставить это 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, если вы хотите, чтобы ваша страница работала.

1 голос
/ 11 февраля 2020

Вы можете использовать литералы шаблона в 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>
1 голос
/ 11 февраля 2020

С чистым 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;
}
1 голос
/ 11 февраля 2020

Используйте следующий код для создания элемента Dynami c и добавьте атрибут к этому элементу. 

<!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>
1 голос
/ 11 февраля 2020

Я сгенерирую дизайн так же, как вы упомянули на картинке выше. добавьте 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>
1 голос
/ 11 февраля 2020

Вы можете использовать для l oop, чтобы добавить HTML к элементу по вашему выбору. I в l oop - это размер элементов, полученных из базы данных 

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>
...