Дмитрий Нечаев
.innerText в JavaScript
17 декабря 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.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile