const createCard = ({ title, subTitle, src, poster }) => {
const template = document.createElement('section');
template.innerHTML = `
<div class="card" style="width: 16rem;">
<a href="#theModal" class="btn btn-link"
data-remote="${src}"
data-toggle="modal" data-target="#theModal">
<img src="${poster}" class="card-poster" alt="image">
</a>
<div class="card-body">
<h3 class="card-title">${title}</h3>
<p class="card-text">${subTitle}</p>
</div>
</div>
`;
return template.children[0];
};
document.body.append(createCard({
title: 'Сказка о Царе Салтане',
subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
src: 'http://ссылка на видео',
poster: 'img/sk-1.jpg'
}));
Таким образом можно перебирать коллекцию, передавать в функцию
createCard объект, на выходе получать уже HTML элемент и добавлять в DOM его.
Это
самый простой способ, можно сделать более продвинутый, через
template. В данном случае будет чуть больше приготовлений, также необходимо будет позаботится о механизме вставки данных.
И третий вариант - использовать фреймворк,
Vue например.
