Javascript:如何分隔div

Question

我是JavaScript新手。在这里，我试图从数组中获取项目并在浏览器上显示它。但是我希望div是分离的。但是当我运行程序的时候。第一个对象有一个div盒子，但是第二个div在第一个div盒子里。但是我想把它们分开，这样我可以使用一些样式。

HTML代码

Javascript代码:

let menu = [
{
id: 1,
title: 'asos',
category: 'greece',
country: 'greece',
img: './img/Asos.jpg',
desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda eius animi officiis dolorum eum!'
},
{
id: 2,
title: 'hamburg',
category: 'germany',
country: 'germany',
img: './img/Hamburg.jpg',
desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda eius animi officiis dolorum eum!'
},
{
id: 3,
title: 'heidelberg',
category: 'germany',
country: 'germany',
img: './img/Heidelberg.jpg',
desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda eius animi officiis dolorum eum!'
},
{
id: 4,
title: 'manarola',
category: 'italy',
country: 'italy',
img: './img/Manarola.jpg',
desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda eius animi officiis dolorum eum!'
}
]
let sectionCenter = document.querySelector('.section-center')
window.addEventListener('DOMContentLoaded', () =>{
let itemMenu = menu.map(function(item) {
return `             
<div class="box">
<img src="${item.img}" class="img" alt="${item.title}">
<div class="desc">
<div class="name">
<h3>${item.title}</h3>
<h3>${item.country}</h3>
</div>
<div class="border-bottom"></div>
<p>${item.desc}</p>
</div>`
})
let displayMenu = itemMenu.join("")
sectionCenter.innerHTML = displayMenu
})

注:如果我用article class='box'代替div class='box'，效果很好。但是使用div的问题是什么??

Answer 1

您缺少关闭</div>标记:

let itemMenu = menu.map(function(item) {
return `             
<div class="box">
<img src="${item.img}" class="img" alt="${item.title}">
<div class="desc">
<div class="name">
<h3>${item.title}</h3>
<h3>${item.country}</h3>
</div>
<div class="border-bottom"></div>
<p>${item.desc}</p>
</div>
</div>`  // <<< Missing tag
})