.innerText в JavaScript

Главная

База знаний

25 июля 2024 г.

Автор

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

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

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

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

Примеры использования `.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.