Как сделать шаблон html?

Для заготовки повторяющейся карточки используйте HTML-элемент template. Его обычное содержимое не отображается сразу, а доступно через свойство content как DocumentFragment. Например, сохраните <template id="card-template"><article><h2></h2></article></template> рядом с контейнером списка. После построения документа получите шаблон через document.querySelector('#card-template') и создайте копию командой const copy = template.content.cloneNode(true). Затем заполните её заголовок: copy.querySelector('h2').textContent = title, где title — строка для конкретной карточки. Добавьте фрагмент в контейнер через list.append(copy). При вставке дети фрагмента переместятся в список, поэтому для следующей карточки нужно снова сделать копию исходного шаблона. Не пытайтесь многократно добавлять один и тот же созданный узел в разные места: DOM перемещает существующий узел, а не создаёт независимые экземпляры автоматически. Если внутри шаблона есть id, обеспечьте их уникальность в готовом документе и обновите связанные атрибуты. Для обработчиков, назначенных через addEventListener, не рассчитывайте на перенос при cloneNode: подключайте их к новой карточке или используйте продуманное делегирование событий на контейнере. Значения обычного текста задавайте через textContent, когда не требуется вставлять разметку. Это помогает не интерпретировать название карточки как HTML. Сам template описывает клиентскую заготовку, но не является циклом и не заполняет данные самостоятельно. Разметка остаётся общей, а JavaScript управляет созданием экземпляров. Проверьте несколько карточек подряд, чтобы убедиться, что заголовки отличаются, связи не повторяются и нужные действия работают у каждого экземпляра.