логотип PurpleSchool
логотип PurpleSchool

.innerText в JavaScript

Автор

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

Свойство .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.

Стрелочка влево.outerHTML в JavaScriptв JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний