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

Алгоритм почти такой же, как и при добавлении самой карточки: создание элемента, добавление класса, вставка текстового содержимого (название товара, его цена), добавление элемента в конец карточки. Все шаги нам знакомы, кроме добавления текста. Как это сделать?

У каждого DOM-элемента есть свойство textContent. Оно содержит текстовое содержимое элемента. В textContent не попадает разметка, только текст.

// HTML
<p>Я — <em>текстовый элемент</em>.</p>

// JS
var p = document.querySelector('p');
console.log(p.textContent);
// Выведет: Я — текстовый элемент.

Это свойство объекта, которое можно не только прочитать, но и записать или перезаписать. Поэтому, если мы хотим задать элементу текстовое содержимое, достаточно записать в свойство необходимое значение.

p.textContent = 'Теперь у меня новое содержимое.';
console.log(p.textContent);
// Выведет: Теперь у меня новое содержимое.

// В HTML содержание тега изменится
<p>Теперь у меня новое содержимое.</p>

Добавим в карточку название товара и его цену. Убедимся, что все новые элементы отображаются на странице.