Как создать часть вёрстки в чистом JS

template.md

Постраение интерфейса

CreateElement

Самый примитивный способ — создавать по элементу и дальше прописывать все атрибуты. Долго и сложно поддерживать, особенно, если вёрстка сложная.

Template

Тег <template> позволяет в себе хранить вёрстку, но его внутренности не будут существовать в DOM. Дальше мы можем с помощью JS достать их, скопировать и уже работать как с обычными элементами.

const template = document.querySelecrot('.template-card');
const cardElement = template.content.cloneNode(true);

После этого простого кода у нас появиться константа cardElement, с которой мы можем работать — менять содержимое и скорее всего в итоге вставим в DOM. Иначе зачем это всё?

Template String

Конструкция языка JS. Основная логика построения с помощью шаблонных строк заключается в том, что мы гененрируем HTML код, как строку, дальше вставляем его другой элемент в памяти, с помощью метода innerHTML. Происходит рендеринг и мы забераем содержимое элемента. Надо помнить, что в самой базовой реализации есть ограничение в один элемент.

const createElementFrom = (template) => {
    const temporaryElement = document.createElement('div');
    temporaryElement.innerHTML = template;
    return temporaryElement.firstChid;
};

const generateCardTemplate = (name) => {
    return `<div class="card">${name}</div>`;
}

const cardElement = createElementFrom(generateCardTemplate('Ditto'));