Изменение текста элемента в JavaScript

JavaScript меняет текст уже найденного DOM-элемента. Для обычного текста используют textContent, а для полей ввода - value.

• Как изменить текст
• Изменение части текста
• Текст в полях ввода
• Итого

Как изменить текст

Для обычного текста используйте textContent. Присваивание заменяет прежнее содержимое элемента новой строкой.

<p class="status">Загрузка...</p>

const status = document.querySelector('.status');

status.textContent = 'Данные загружены';

После присваивания браузер покажет в элементе новый текст.

Изменение части текста

Присваивание textContent заменяет всё содержимое элемента, включая вложенные элементы. Если нужно менять только часть фразы, выделите её отдельным элементом.

<p>Статус заказа: <span class="order-status">готов</span></p>

const orderStatus = document.querySelector('.order-status');

orderStatus.textContent = 'отправлен';

Так текст «Статус заказа:» останется на месте, а изменится только значение внутри span.

Текст в полях ввода

Текущее значение элементов input и textarea получают и изменяют через свойство value, а не textContent.

<input class="name-input" value="Иван" />

const nameInput = document.querySelector('.name-input');

console.log(nameInput.value); // Иван
nameInput.value = 'Анна';

После присваивания пользователь увидит новое значение в поле.

Итого

textContent - основной способ изменить обычный текст элемента. Чтобы сохранить разметку вокруг изменяемого значения, выбирайте вложенный элемент. Для полей ввода используйте value.