Приступим к добавлению карточки товара. Если бы мы добавляли новый элемент через разметку, то мы бы добавили ещё один li с классом product в список товаров. В JavaScript для выполнения этой же задачи нужно сделать несколько шагов. Пойдём по порядку.

Создание DOM-элемента

Для начала нужно создать новый элемент списка, li. Создавать элементы можно разными способами, мы будем использовать метод createElement() объекта document. Метод принимает на вход строку с именем тега и возвращает созданный DOM-элемент. Этот элемент можно записать в переменную для дальнейших манипуляций:

var card = document.createElement('li');

Обратите внимание, что createElement — метод именно объекта document. То есть с его помощью мы создаём какой-то элемент для этого документа, пока не указывая, где он будет находиться в DOM.

Добавление класса

С этим шагом вы уже знакомы. Работаем с classList созданного элемента:

var card = document.createElement('li');
card.classList.add('card');

Добавление в DOM-дерево

Вновь созданный элемент по умолчанию не находится в DOM-дереве и не отображается на странице. Мы просто храним его где-то в переменной. Чтобы новый элемент появился на странице, его нужно добавить в DOM. Для этого найдём в текущем DOM-дереве элемент (родитель) и вставим в него наш элемент.

Мы будем использовать метод appendChild() родителя. Этот метод принимает на вход элемент и вставляет его в конец родительского элемента. То есть, если в списке уже есть три элемента, как в нашем случае, добавленный с помощью appendChild элемент станет четвёртым в списке.

var list = document.querySelector('.cards');
var card = document.createElement('li');
card.classList.add('card');

// После вызова этого метода новый элемент отрисуется на странице
list.appendChild(card);

Вот что произойдёт с разметкой после вызова appendChild:

<!-- Исходное состояние разметки -->
<ul class="cards">
  <li class="card">Существующий элемент</li>
</ul>

<!-- Состояние после вызова appendChild -->
<ul class="cards">
  <li class="card">Существующий элемент</li>
  <li class="card">Добавленный элемент</li>
</ul>

Последовательность добавления элемента в DOM может быть другой: можно создать элемент с помощью createElement и сразу вставить его в родительский элемент, а уже затем добавлять классы. Но это не лучший путь — каждое изменение в DOM вызывает перерисовку страницы, а это дорогая операция, она занимает много времени.

Теперь создадим карточку товара, добавим ей подходящий класс и вставим в конец списка товаров. Затем снова выведем в консоль children списка, чтобы убедиться, что наша карточка попала в коллекцию дочерних элементов. Это стандартное поведение коллекции — она меняется на лету вместе с изменением DOM.