JavaScript | Как генерировать HTML-разметку?

JavaScript | Как генерировать HTML-разметку?

Этот вопрос можно разделить на два варианта ответа:

    1. Мы генерируем строку JavaScript
    2. Мы генерируем объекты JavaScript

Предлагаю рассмотреть два варианта генерации разметки. Но заранее опишу предназначение обоих вариантов.

Первый способ нужен в основном для серверной стороны, когда сайт работает на JavaScript. Я про NodeJS. Сервер генерирует разметку и отправляет строку в браузер пользователя. Браузер распознаёт HTML и радостно его отрисовывает.

Второй способ нужен в основном на клиентской стороне, когда вся генерация делается в браузере у пользователя.

 

Генерируем строку с HTML-разметкой JavaScript

Приведу пример. Нам нужно составить простой список товарных групп для сайта. Как из этого сделать HTML-разметку силами JavaScript.

У нас есть массив с условными товарными группами:

var tg = ["Телефоны", "Телевизоры", "Холодильники", "Чайники"]

Технически нам нужно:

  1. пробежаться по всему массиву и обернуть значение каждого элемента массива в HTML-теги <li> и </li>
  2. соединить все новые элементы массива в одну строку
  3. обернуть новую строку в HTML-теги <ul> и </ul>

 

Шаг 1 — Пробегаем по массиву и преобразовываем каждый элемент массива

Для массового преобразования элементов массива будем использовать метод map() для объектов-прототипов Array.

tg.map(i=>`<li>${i}</li>`)

Мы использовали экранирующую конструкцию,которая работает только внутри строки, объявленной при помощи обратных одинарных кавычек — «:

${}

В итоге мы получим новый массив состоящий из строк:

["<li>Телефоны</li>", "<li>Телевизоры</li>", "<li>Холодильники</li>", "<li>Чайники</li>"]
Обернули значения элементов массива тегами li - JavaScript
Обернули значения элементов массива тегами li — JavaScript

 

Шаг 2 — Соединяем элементы нового массива в одну строку

Для склеивания строковых значений массива будем использовать метод join() для объектов-прототипов Array. В качестве разделителя будем использовать пустую строку — «»

tg.map(i=>`<li>${i}</li>`).join("")

В итоге мы получим одну длинную строку:

"<li>Телефоны</li><li>Телевизоры</li><li>Холодильники</li><li>Чайники</li>"
Одна строка из элементов массива - JavaScript
Одна строка из элементов массива — JavaScript

 

Шаг 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
Создали строку HTML-списка — JavaScript

Теперь эту строку можно отдать в браузер на отрисовку. Разметка создана. Задача выполнена.

 

Генерируем объекты HTML-элементов JavaScript

У нас есть массив с условными товарными группами:

var tg = ["Носки", "Трусы", "Шарфы", "Шапки"]

Технически нам нужно:

  1. пробежаться по всему массиву и создать DOM-объекты «li» из значения каждого элемента массива.
  2. создать DOM-объект «ul»
  3. сделать все «li» детьми «ul»

Шаг 1 — Создаём объекты «li»

Для массового преобразования элементов массива будем использовать метод map() для объектов-прототипов Array. Объекты DOM будут паковаться при помощи метода createElement(). В качестве параметра передаём строку «li«. Метод createElement() описан в разделе «Интерфейс Document (Документ)» объектной модели документа.

tg.map(i => {e = document.createElement("li"); e.innerText = i; return e})

В итоге получаем массив из объектов li.

Массив из объектов li - JavaScript
Массив из объектов li — JavaScript

 

Шаг 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

Создали список и наполнили его элементами - JavaScript
Создали список и наполнили его элементами — JavaScript

Элементы созданы и собраны. Теперь останется просто поместить этот список в нужное место разметки. Задача выполнена!

 

Информационные ссылки

DOM

DOM Standard — https://dom.spec.whatwg.org/

JavaScript | Как вставить переменную в строку?