Как не писать повторяющийся код в HTML, а автоматизировать создание кода на JS?

Question

[Максим js]

Здравствуйте, в общем делаю для портфолио видеохостинг и образовалась такая проблема -> блоки повторяются и их может быть на сайте 1000 и больше - это получится очень много одинакового кода.
Вот сам блок

<div class="card" style="width: 16rem;">
            <a href="#theModal" class="btn btn-link"
              data-remote="https://ссылканавидео"
              data-toggle="modal" data-target="#theModal">
              <img src="img/sk-1.jpg" class="card-poster" alt="image">
            </a>
            <div class="card-body">
              <h3 class="card-title">Сказка о Царе Салтане</h3>
              <p class="card-text">Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана 
              напомнят о том, что любовь, верности и сила духа всегда побеждают!</p>
            </div>
          </div>

получается отличаются только ссылкой,заголовком и описанием. Как можно не повторять весь этот код каждый раз при добавлении нового видео на сайт?

Comments

[Rustam Bainazarov]

Оффтоп. 1000 блоков, 8000+ узлов одновременно на одной странице? У-у-у.

Answer 1

[Александр]

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 например.

Answer 2

[Пашенька]

Для этого во всех языках программирования придумали цикл. Он же loop. Он же залу..фор, вайл, форич и т.п.

Comments

[Максим js]

const cardData = [
  {
    title: 'Сказка о Царе Салтане1',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
    src: 'http://ссылка на видео',
    poster: 'img/sk-1.jpg'
  },

  {
    title: 'Сказка о Царе Салтане2',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
    src: 'http://ссылка на видео',
    poster: 'img/sk-2.jpg'
  },
  {
    title: 'Сказка о Царе Салтане3',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
    src: 'http://ссылка на видео',
    poster: 'img/sk-3.jpg'
  },
  {
    title: 'Сказка о Царе Салтане4',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
    src: 'http://ссылка на видео',
    poster: 'img/sk-4.jpg'
  }
]


let card = document.createElement('card');
card.src = cardData[0].src;
card.poster = cardData[0].poster;
card.title = cardData[0].title;
card.subTitle = cardData[0].subTitle;

Подскажите пожалуйста кодом, как циклом создавать элемент с разными данными на странице?

Answer 3

[Алексей]

Не забудьте при этом сделать lazy load иначе при одновременной генерации 1000 блоков все может намертво полечь