从 DB 到 HTML 的连接

Answer 1

首先，页脚标签应该位于正文标签内！

第二：代码中未引用

hotelsContainer

，并且根本未使用

hotelBlocks

！，但我假设您在问题中提供了不完整的代码

第三： 要添加 div 元素，每次都必须先获取

main-body

元素，这样您就可以添加一个子元素，在您的情况下，每次输入新记录时都会添加

div

。

const hotelsContainer= document.querySelector('.main-body');

除此之外，它似乎是正确的，但是请记住，如果您的代码正在运行，则在加载 DOM 内容之前，您必须将此代码放入另一个文件中并将其添加到 HTML 的末尾，或者将其包装起来即使是这样的:

window.addEventListener('DOMContentLoaded', () => {
        /*DB CODE*/
         const hotelsArray = /*Your code*/
        const hotelsContainer= document.querySelector('.main-body');


hotelsArray.forEach(hotel => {
  const hotelElement = document.createElement('div');
  hotelElement.innerHTML = `
      <div class="hotel-block">
          <h2>${hotel.hotel_name}</h2>
          <p>Цена: $ ${hotel.price}</p>
          <p>${hotel.description}</p>
          <a class="click-btn btn-style2" href="./contact.html">List</a>
      </div>
  `;
  hotelsContainer.appendChild(hotelElement);
})

 }