.innerText в JavaScript

Главная

База знаний

javascript

Элемент на странице в JavaScript

15 сентября 2025

Автор

Дмитрий Нечаев

Свойство .innerText в JavaScript предоставляет возможность читать текстовое содержимое элемента и всех его потомков, а также устанавливать новое текстовое содержимое. Это полезно, когда нам нужно получить или изменить текст на странице, включая текст, находящийся внутри дочерних элементов. Давайте рассмотрим использование .innerText более подробно с примерами.

Введение в `.innerText`

Свойство .innerText позволяет нам получать текстовое содержимое элемента, игнорируя все его дочерние элементы, и устанавливать новое текстовое содержимое. Это отличается от свойства .textContent, которое возвращает текст вместе с содержимым всех дочерних элементов, включая скрытые и невидимые элементы.

В JavaScript свойство .innerText позволяет получить или установить текстовое содержимое элемента, отображаемое на странице. В отличие от .textContent, .innerText учитывает стили CSS и скрытые элементы. Если вы хотите детальнее изучить работу с текстом в JavaScript, научиться получать и устанавливать текстовое содержимое элементов, узнать о различиях между .innerText и .textContent, а также создавать динамические и интерактивные веб-приложения — приходите на наш большой курс JavaScript с нуля. На курсе 198 уроков и 30 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Примеры использования `.innerText`

Давайте рассмотрим несколько примеров использования свойства .innerText для чтения и записи текстового содержимого.

1. Чтение текста элемента

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример</title>
</head>
<body>
  <div id="myDiv">
    <p>Пример текста <span>внутри элемента</span></p>
  </div>

  <script>
    // Получаем ссылку на элемент
    const myDiv = document.getElementById('myDiv');

    // Читаем текстовое содержимое элемента
    const textContent = myDiv.innerText;
    console.log(textContent); // Выведет: Пример текста внутри элемента
  </script>
</body>
</html>

В этом примере мы используем свойство .innerText для чтения текстового содержимого элемента <div> с идентификатором myDiv, игнорируя содержимое внутренних элементов.

2. Изменение текста элемента

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример</title>
</head>
<body>
  <div id="myDiv">
    <p>Пример текста <span>внутри элемента</span></p>
  </div>

  <button onclick="changeText()">Изменить текст</button>

  <script>
    // Функция для изменения текста элемента
    function changeText() {
      // Получаем ссылку на элемент
      const myDiv = document.getElementById('myDiv');

      // Устанавливаем новый текст
      myDiv.innerText = 'Новый текст';
    }
  </script>
</body>
</html>

В этом примере мы используем свойство .innerText для изменения текстового содержимого элемента <div> с идентификатором myDiv на новый текст при нажатии на кнопку.

Заключение

Свойство .innerText в JavaScript предоставляет простой и эффективный способ чтения текста элемента и его потомков, а также изменения текстового содержимого элемента. Это помогает нам легко манипулировать текстом на странице, делая пользовательский интерфейс более динамичным и удобным для пользователей. Надеюсь, данная статья помогла вам лучше понять, как использовать .innerText в ваших проектах JavaScript.

Выбор между .innerText и .textContent зависит от конкретной задачи и требований к учету стилей CSS и скрытых элементов. Для глубокого понимания работы с текстом в JavaScript и освоения различных техник манипуляции контентом, мы рекомендуем наш курс JavaScript с нуля. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир JavaScript прямо сегодня.