Разница между innerText, innerHTML и value в JavaScript

Быстрый ответ

innerText выводит только текст без HTML-форматирования, идентичный тому, как если бы вы смотрели на страницу.

innerHTML позволяет манипулировать HTML-структурой элементов, включая теги и стили.

value применяется для работы с значениями интерактивных элементов, таких как input, textarea или select.

// Работаем с текстом, игнорируя HTML-теги
document.querySelector('#elem').innerText = 'Текст';

// Вставляем HTML-код, изменяя структуру страницы
document.querySelector('#elem').innerHTML = '<span>HTML</span>';

// Задаем значение для элементов форм, таких как input или select
document.querySelector('#input').value = 'Данные';

Детальнее об innerText, innerHTML и value

Понимание свойств innerText, innerHTML и value важно для работы с DOM и взаимодействия с пользователем. Давайте разберемся с их применением подробнее.

innerText – текст "как есть"

innerText фильтрует страницу, скрывая CSS и скрытые элементы. Это то, что пользователь видит на экране, не затрагивая код и стили.

• Защита от XSS: надёжный способ вставки чисто текстового контента.
• Извлечение текста: идеально подходит для получения видимого текста на странице.

// Получаем только то, что видим
console.log(document.querySelector('.styledText').innerText);

Подробнее об этом расскажет наш спикер на видео

innerHTML – гибкость HTML

innerHTML дает полный контроль над HTML-содержимым элемента. Создавайте и изменяйте разметку и дизайн документа на лету.

• Динамический контент: позволяет встраивать интерактивные HTML-элементы.
• Безопасность: проявляйте осторожность при внедрении ненадёжного контента, чтобы избежать XSS-атак.

// Добавляем HTML-элементы
document.querySelector('.content').innerHTML = '<div class="new">Новый элемент</div>';

value – данные форм

value актуален для элементов форм и отражает текущее значение, введенное пользователем в input, select или textarea.

• Обработка данных: центральный элемент для сбора и обработки данных формы.
• Динамичность: значение может изменяться в реальном времени, делая интерфейс отзывчивым.

// Значения, введенные пользователем, становятся данными
document.querySelector('#username').value = 'user123';

Визуализация

Давайте визуально представим отличия между innerText, innerHTML, и value:

| Свойство       | Визуальная аналогия                                         |
|----------------|--------------------------------------------------------|
| `innerText`    | 🏞️ **Пейзаж** вокруг вас (читаемый текст без лишних деталей)     |
| `innerHTML`    | 🎨 **Картина** пейзажа (HTML-версия текста с тегами и стилями)    |
| `value`        | ✔️ **Список материалов** для рисования (значения в полях форм)     |

Представьте, что innerText – это вы, наблюдающий за природой 🏞️. То есть простой пейзаж без излишних деталей.

element.innerText; // "Привет, мир!"

При использовании innerHTML вы взгляните на художественное полотно 🎨, где каждая деталь пейзажа передана с помощью HTML.

element.innerHTML; // "<p>Привет, <strong>мир!</strong></p>"

value – это как список необходимых для рисования материалов ✔️, перечень того, что вы планируете воспроизвести на холсте.

element.value; // "Пользовательский ввод"

В конечном итоге,

• innerText показывает то, что видно.
• innerHTML раскрывает то, как это представлено в HTML.
• value – это введенные данные, подобные секретным кодам.

Нюансы и особенности

Погружение в "скрытый мир" с innerText

innerText учитывает CSS-правила, и если элемент скрыт через display: none, он не попадет в вывод innerText.

hiddenElement.style.display = 'none';
console.log(hiddenElement.innerText); // Результат: '', т.к. невидимый элемент не отображается!

Создание структур через innerHTML

innerHTML позволяет работать со сложными HTML-структурами, предоставляя вам инструменты для создания богатых интерфейсов.

const markup = `<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`;
listContainer.innerHTML = markup; // Создали всю цепочку маркированных списков!

Стабильный value

value обеспечивает постоянный доступ к данным пользователя, независимо от состояния интерфейса, что делает его идеальным для управления формами и проверки данных.

const userData = {
  username: document.querySelector('#username').value, // JamesBond007
  email: document.querySelector('#email').value // 007@mi6.gov 
};

Бережное использование innerHTML с целью производительности

Частое использование innerHTML может быть затратным из-за перерисовки содержимого. Вместо этого используйте DOM-методы, такие как createElement и appendChild.

const newElement = document.createElement('p');
newElement.textContent = 'Медленно, но верно побеждаем в гонке за рендеринг!';
document.body.appendChild(newElement);

Полезные материалы

1. HTMLElement: свойство innerText – Web APIs | MDN — детальное руководство по работе с innerText.
2. Элемент: свойство innerHTML – Web APIs | MDN — официальная документация по свойству innerHTML.
3. HTML DOM свойство innerText — разъяснение разницы между innerText и innerHTML.
4. Разница между innerText, innerHTML и value? – Stack Overflow — обсуждение сообщества с практическими примерами и рекомендациями.
5. Как работать с HTML-элементами форм input и textarea | DigitalOcean — исчерпывающее руководство по использованию value для элементов форм.