Попытка сделать div внутри div с помощью цикла

Question

Я пытаюсь сделать div с al oop и моими данными, и в этих div я хотел бы сделать одновременно с другими div Я пробовал что-то, но я думаю, что это неправильный способ сделать это, это будет Было бы здорово, если бы кто-нибудь мог показать мне пример, чтобы сделать что-то вроде этого, чтобы в итоге это выглядело так:

                        <div class="col-3 vehicleholder" id="THE ID">
                            <div class="vehicle-icon">
                                <i class="fas fa-car"></i> <-- The Icon
                            </div>
                            <div class="vehicle-information">
                                <div class="car-name">THE VEH MODEL</div>
                                <div class="numberplates">THE PLATENUMBERS</div>
                            </div>
                        </div>

      let app = JSON.parse(parkedvehicle);
      const vehiclelist = document.querySelector('div.row vehicles')
      for (i = 0; i < app.length; i++) {
          let vehicleholder = document.createElement('div');
          vehicleholder.classList.add('col-3', 'vehicleholder');

          let id = app[i].id;
          vehicleholder.setAttribute('id', id);
          
          const vehicleinfo = document.querySelector('div.col-3 vehicleholder')
          let vehicleicondiv = document.createElement('div');
          vehicleicondiv.classList.add('vehicle-icon');

          const vehicleinfoicon = document.querySelector('div.vehicle-icon');
          let vehicleicon = document.createElement('i');
          vehicleicon.classList.add('fas', 'fa-car');

          //

          const vehicleinfotext = document.querySelector('div.col-3 vehicleholder')
          let vehicleicondiv2 = document.createElement('div');
          vehicleicondiv2.classList.add('vehicle-information');

          const vehicletext = document.querySelector('div.vehicle-information')
          let vehicleicondiv3 = document.createElement('div');
          vehicleicondiv3.classList.add('car-name');
          vehicleicondiv3.innerHTML = app[i].vehmodel;

          const vehicletext2 = document.querySelector('div.vehicle-icon');
          let text = document.createElement('div');
          text.classList.add('numberplates');
          text.innerHTML = app[i].numberplates;

          vehiclelist.appendChild(vehicleholder);
          vehicleinfo.appendChild(vehicleicondiv);
          vehicleinfoicon.appendChild(vehicleicon);
          vehicleinfotext.appendChild(vehicleicondiv2);
          vehicletext.appendChild(vehicleicondiv3);
          vehicletext2.appendChild(text);

Answer 1

Итак, самый простой способ сделать это - создать оболочку.

<div id="wrapper"></div>

затем использовать для l oop и вставить HTML таким образом:

let wrapper = document.getElementById('wrapper')
let app = JSON.parse(parkedvehicle);

for (let car of app){
wrapper.innerHTML += `
<div class="col-3 vehicleholder" id="${car.id}">
  <div class="vehicle-icon">
    <i class="fas fa-car"></i>
   </div>
   <div class="vehicle-information">
     <div class="car-name">${car.vehmodel}</div>
     <div class="numberplates">${car.numberplates}</div>
   </div>
 </div>
`
}

Итак, что я сделал, внутри внутренней оболочки HTML я использовал `` (литералы шаблона), поэтому я могу написать HTML, любой javascript, который я хочу реализовать, я завернут в $ {}, и все это внутри for л oop. обратите внимание, что я написал: wrapper.inner HTML + =, чтобы он мог добавлять блок кода снова и снова.

это код, например: https://codepen.io/Elnatan/pen/eYZYZey

надеюсь, тебе помогло.

Answer 2

Самый простой способ - использовать литералы шаблона

Например (это входит в for l oop)

const HtmlCode = 
`<div class="col-3 vehicleholder" id="${app[i].id}">
  <div class="vehicle-icon">
    <i class="fas fa-car"></i>
  </div>
  <div class="vehicle-information">
    <div class="car-name">${app[i].VEH}</div>
    <div class="numberplates">${app[i].plateNumbers}</div>
  </div>
</div>`;

vehiclelist.innerHTML += HtmlCode;