Этот вопрос можно разделить на два варианта ответа:
Предлагаю рассмотреть два варианта генерации разметки. Но заранее опишу предназначение обоих вариантов.
Первый способ нужен в основном для серверной стороны, когда сайт работает на JavaScript. Я про NodeJS. Сервер генерирует разметку и отправляет строку в браузер пользователя. Браузер распознаёт HTML и радостно его отрисовывает.
Второй способ нужен в основном на клиентской стороне, когда вся генерация делается в браузере у пользователя.
Генерируем строку с HTML-разметкой JavaScript
Приведу пример. Нам нужно составить простой список товарных групп для сайта. Как из этого сделать HTML-разметку силами JavaScript.
У нас есть массив с условными товарными группами:
var tg = ["Телефоны", "Телевизоры", "Холодильники", "Чайники"]
Технически нам нужно:
- пробежаться по всему массиву и обернуть значение каждого элемента массива в HTML-теги <li> и </li>
- соединить все новые элементы массива в одну строку
- обернуть новую строку в HTML-теги <ul> и </ul>
Шаг 1 — Пробегаем по массиву и преобразовываем каждый элемент массива
Для массового преобразования элементов массива будем использовать метод map() для объектов-прототипов Array.
tg.map(i=>`<li>${i}</li>`)
Мы использовали экранирующую конструкцию,которая работает только внутри строки, объявленной при помощи обратных одинарных кавычек — «:
${}
В итоге мы получим новый массив состоящий из строк:
["<li>Телефоны</li>", "<li>Телевизоры</li>", "<li>Холодильники</li>", "<li>Чайники</li>"]
Шаг 2 — Соединяем элементы нового массива в одну строку
Для склеивания строковых значений массива будем использовать метод join() для объектов-прототипов Array. В качестве разделителя будем использовать пустую строку — «»
tg.map(i=>`<li>${i}</li>`).join("")
В итоге мы получим одну длинную строку:
"<li>Телефоны</li><li>Телевизоры</li><li>Холодильники</li><li>Чайники</li>"
Шаг 3 — Оборачиваем строку из элементов дополнительными тегами списка
Нам просто нужно положить строку из элементов внутрь конструкции <ul></ul>
`<ul>${tg.map(i=>`<li>${i}</li>`).join("")}</ul>`
Такая команда вернёт нам полноценную строку, которая будет соответствовать синтаксису HTML.
"<ul><li>Телефоны</li><li>Телевизоры</li><li>Холодильники</li><li>Чайники</li></ul>"
Теперь эту строку можно отдать в браузер на отрисовку. Разметка создана. Задача выполнена.
Генерируем объекты HTML-элементов JavaScript
У нас есть массив с условными товарными группами:
var tg = ["Носки", "Трусы", "Шарфы", "Шапки"]
Технически нам нужно:
- пробежаться по всему массиву и создать DOM-объекты «li» из значения каждого элемента массива.
- создать DOM-объект «ul»
- сделать все «li» детьми «ul»
Шаг 1 — Создаём объекты «li»
Для массового преобразования элементов массива будем использовать метод map() для объектов-прототипов Array. Объекты DOM будут паковаться при помощи метода createElement(). В качестве параметра передаём строку «li«. Метод createElement() описан в разделе «Интерфейс Document (Документ)» объектной модели документа.
tg.map(i => {e = document.createElement("li"); e.innerText = i; return e})
В итоге получаем массив из объектов li.
Шаг 2 — Создаём объект ul
var spisok = document.createElement("ul")
Шаг 3 — Присваиваем детей для ul
Для добавления детей списку ul мы будем использовать метод replaceChildren(), который принадлежит объектной модели документа и описан в миксине ParentNode (Родительский узел)
Т. к. все наши элементы списка лежат в массиве, то для последовательного добавления каждого из них нам нужно использовать оператор sread — … (троеточие)
spisok.replaceChildren(...tg.map(i => {e = document.createElement("li"); e.innerText = i; return e}))
В результате наши объекты li станут детьми для объекта ul
Элементы созданы и собраны. Теперь останется просто поместить этот список в нужное место разметки. Задача выполнена!
Информационные ссылки
DOM Standard — https://dom.spec.whatwg.org/
