Разница между text и html

Umbrella JS предоставляет лёгкий и компактный способ работы с DOM, позволяя манипулировать элементами страницы с минимальным количеством кода. Одним из ключевых аспектов является различие между методами text() и html(), которые позволяют получать и изменять содержимое элементов, но делают это принципиально по-разному.

Метод text()

Метод text() работает с текстовым содержимым элементов, игнорируя любую HTML-разметку.

Основные особенности:

  • Получение текста:
u('.example').text();

Возвращает всю текстовую информацию внутри выбранного элемента без тегов.

  • Установка текста:
u('.example').text('Новый текст');

При установке текста вся существующая HTML-разметка удаляется, а на её месте появляется только строка текста.

Пример:

<div class="example">
    <span>Старый текст</span>
</div>
u('.example').text('Привет мир');

Результат в DOM:

<div class="example">Привет мир</div>

Здесь <span> был удалён, а текст заменён напрямую.

Метод html()

Метод html() работает с HTML-содержимым элементов, что позволяет как получать, так и устанавливать разметку целиком.

Основные особенности:

  • Получение HTML:
u('.example').html();

Возвращает строку с полной внутренней HTML-разметкой элемента.

  • Установка HTML:
u('.example').html('<strong>Жирный текст</strong>');

Позволяет вставлять теги и создавать вложенные структуры внутри выбранного элемента.

Пример:

<div class="example">
    <span>Старый текст</span>
</div>
u('.example').html('<em>Новый текст</em>');

Результат в DOM:

<div class="example"><em>Новый текст</em></div>

HTML-теги сохраняются и корректно интерпретируются браузером.

Ключевые различия

Характеристика text() html()
Тип содержимого Только текст HTML-разметка и текст
Влияние на теги Удаляет все вложенные теги Сохраняет и обрабатывает теги
Безопасность Текст безопасен, нет XSS риска Нужно контролировать ввод, возможен XSS
Использование Простое отображение текста Динамическая вставка HTML-контента

Пример совместного использования:

let element = u('.example');

// Получаем текст без тегов
let plainText = element.text();

// Вставляем новый HTML
element.html('<span>' + plainText + '</span>');

Этот приём полезен, когда нужно сначала очистить или обработать текст, а затем оформить его с разметкой.

Практические рекомендации

  • text() используют для отображения данных, которые должны быть чистым текстом, без риска внедрения HTML или скриптов.
  • html() применяют, когда требуется динамическое создание сложной структуры с тегами, форматированием и вложенными элементами.
  • Для обновления больших блоков контента с форматированием предпочтительнее html().
  • Для замены или получения значений полей формы, кнопок или заголовков, где важен только текст, предпочтительнее text().

Использование этих методов позволяет точно контролировать содержимое элементов и предотвращает ошибки при работе с HTML-разметкой. Правильный выбор между text() и html() обеспечивает как безопасность, так и корректное отображение данных.

Оглавление