JavaScript

Как с помощью кода элемента изменить текст в JavaScript

Чтобы изменить текст элемента через JavaScript, найдите элемент через querySelector или getElementById, затем присвойте новый текст свойству textContent. Для обычного текста это безопаснее и проще, чем innerHTML

Минимальный пример:

<h1 id="title">Старый текст</h1>

<script>
  const title = document.querySelector("#title");
  title.textContent = "Новый текст";
</script>

После загрузки страницы заголовок изменится

Пример с кнопкой

Чаще текст меняют после действия пользователя:

<h1 id="title">До клика</h1>
<button id="button">Изменить</button>

<script>
  const title = document.querySelector("#title");
  const button = document.querySelector("#button");

  button.addEventListener("click", () => {
    title.textContent = "Текст изменен по клику";
  });
</script>

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

Почему textContent

textContent меняет именно текст внутри элемента:

title.textContent = "Готово";

Если передать строку с тегами, она будет показана как текст, а не выполнена как HTML:

title.textContent = "<strong>Готово</strong>";

Это полезно, когда текст приходит от пользователя или из формы: меньше риск случайно вставить HTML туда, где нужен обычный текст

Когда нужен innerHTML

innerHTML нужен, если вы действительно хотите вставить HTML-разметку:

title.innerHTML = "<strong>Готово</strong>";

Но для новичка правило такое: если вы просто меняете текст, используйте textContent. innerHTML применяйте только тогда, когда точно понимаете, зачем вставляете HTML

Как взять текст из input

Если новый текст должен прийти из поля ввода, используйте input.value:

<input id="textInput" placeholder="Введите текст">
<button id="save">Сохранить</button>
<p id="result">Пока пусто</p>

<script>
  const textInput = document.querySelector("#textInput");
  const save = document.querySelector("#save");
  const result = document.querySelector("#result");

  save.addEventListener("click", () => {
    result.textContent = textInput.value;
  });
</script>

Здесь value читает текст из поля, а textContent записывает его в обычный элемент

Изменить несколько элементов

Если нужно изменить несколько одинаковых элементов, используйте querySelectorAll:

<p class="status">Ожидание</p>
<p class="status">Ожидание</p>
<button id="done">Готово</button>

<script>
  const statuses = document.querySelectorAll(".status");
  const done = document.querySelector("#done");

  done.addEventListener("click", () => {
    for (const status of statuses) {
      status.textContent = "Выполнено";
    }
  });
</script>

querySelectorAll возвращает список элементов. По нему можно пройти циклом и изменить текст каждого элемента

querySelector и getElementById

Оба варианта работают:

const title = document.querySelector("#title");

И:

const title = document.getElementById("title");

Для начинающих querySelector удобен тем, что использует CSS-селекторы: #id, .class, button, main p

Частые ошибки

Забыть решетку в querySelector

Если элемент имеет id="title", пишите:

document.querySelector("#title")

Без # браузер будет искать тег <title> или другой неподходящий элемент

Менять текст до появления элемента

Если скрипт стоит в head без defer, элемент может еще не существовать. Используйте:

<script src="script.js" defer></script>

Или ставьте скрипт перед закрывающим </body>

Использовать value для обычного текста

value нужен для полей формы. Для h1, p, div, span используйте textContent

Не проверить null

Если селектор ошибочный, элемент не найдется:

const title = document.querySelector("#title");

if (!title) {
  console.log("Элемент не найден");
}

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

Мини-задание

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

Что почитать дальше по JavaScript

Если нужен общий маршрут по теме, откройте рубрику JavaScript. Для соседних задач пригодятся эти разборы:

0 комментариев

Старые

Новые Популярные