• Теория
  • Теория

Свойство textContent, текстовое содержимое

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

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

У каждого 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>

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

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Цена 22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «JavaScript в браузере» тренажёра «Погружение в браузерный JavaScript» можно после регистрации и оформления подписки.