javascript - 尝试使用循环在 div 中制作 div

Question

我正在尝试用循环和我的数据制作 div，在这个 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>

然后使用 for 循环并以这种方式插入 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>
`
}

所以我做了什么，在包装器 innerHTML 中，我使用了``(模板文字)，所以我可以编写 HTML，我想实现的任何 javascript 都包装在 ${} 中，所有这些都在 for 循环中。请注意，我写道: wrapper.innerHTML += 所以它可以一次又一次地添加代码块。
这是一个代码笔，例如:
https://codepen.io/Elnatan/pen/eYZYZey
希望它对你有所帮助。