<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../static/style.css" />
</head>
<body>
<div>
<div class="main-block" id="cards"></div>
</div>
<script src="script.js" />
</body>
</html>const cards = [
{id:1, title:'Яблоки', price:20, img:'url'},
{id:2, title:'Апельсины', price:35, img:'url'},
{id:3, title:'Мандарины', price:40, img:'url'}
]
const toHTML = card => `
<div>
<img src="${card.img}" alt="${card.title}"/>
<p>${card.title}</p><br>
<p>${card.price}</p>
</div>
`
function render() {
const html = cards.map(toHTML).join('')
document.querySelector('#cards').innerHTML = html
}
render()
<script src="script.js" />In HTML, the use of this syntax is restricted to void elements and foreign elements. If it is used for other elements, it is treated as a start tag.
Средний
Простой
Простой
Простой