Получение и установка текста

jQuery предоставляет удобные методы для работы с текстовым содержимым элементов HTML. Эти методы позволяют получать, изменять или полностью заменять текст, а также работать с HTML-разметкой внутри элементов. Основные функции для этих целей — .text() и .html().

Метод .text()

Метод .text() используется для получения или установки текстового содержимого выбранных элементов.

Получение текста:

var content = $('#element').text();
console.log(content);

В этом примере $('#element') выбирает элемент по идентификатору, а .text() возвращает весь текст, находящийся внутри элемента, включая текст дочерних элементов.

Установка текста:

$('#element').text('Новый текст');

При вызове с аргументом .text() заменяет текст внутри выбранных элементов. Важно отметить, что все дочерние элементы будут удалены, и на их месте появится указанный текст.

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

  • .text() безопасен для вставки пользовательского ввода, так как автоматически экранирует HTML-теги.
  • Можно использовать функцию для динамического изменения текста:
$('#element').text(function(index, oldText){
    return oldText + ' (обновлено)';
});

Аргументы функции: index — порядковый номер элемента в выборке, oldText — текущее содержимое элемента.

Метод .html()

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

Получение HTML:

var htmlContent = $('#element').html();
console.log(htmlContent);

Возвращается строка, содержащая весь HTML внутри выбранного элемента, включая дочерние теги.

Установка HTML:

$('#element').html('<strong>Жирный текст</strong> и обычный текст');

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

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

  • Использование .html() требует осторожности при работе с пользовательскими данными, так как вставка неэкранированного HTML может привести к XSS-уязвимостям.
  • Поддерживает динамическое формирование HTML через функцию:
$('#element').html(function(index, oldHtml){
    return '<div>' + oldHtml + ' (добавлено)</div>';
});

Отличие .text() и .html()

Метод Что возвращает/устанавливает Безопасность Применение
.text() Только текст без HTML Безопасно для ввода Изменение видимого текста
.html() HTML-разметку вместе с текстом Требует экранирования Вставка сложной разметки

Использование .text() предпочтительно при работе с чистым текстом, тогда как .html() необходим для работы с разметкой или динамическим созданием элементов.

Дополнительные приёмы

Комбинированное получение текста из нескольких элементов:

var combinedText = $('.item').map(function(){
    return $(this).text();
}).get().join(', ');

Метод .map() позволяет перебрать элементы выборки и вернуть массив текстов, который затем объединяется в строку через join().

Вставка текста или HTML в несколько элементов сразу:

$('.item').text('Обновлённый текст');
$('.item').html('<span>HTML-содержимое</span>');

Операции применяются ко всем элементам выборки без необходимости перебора через цикл.

Работа с атрибутами и значениями формы

Для элементов формы часто необходимо не просто менять текст, а значение атрибута value. В jQuery это делается с помощью метода .val(), который работает по аналогии с .text():

// Получение значения
var inputValue = $('#input').val();

// Установка значения
$('#input').val('Новое значение');

Метод .val() полностью управляет значением формы, не трогая её текстовое содержимое.

Резюме приёмов

  • .text() — безопасная работа с текстом, удаляет все дочерние элементы при установке нового текста.
  • .html() — вставка HTML-разметки, требует осторожности с пользовательскими данными.
  • .val() — управление значениями полей формы.
  • Использование функций в методах позволяет динамически формировать текст или HTML с учётом текущего содержимого и индекса элемента.

Эти инструменты создают основу для манипуляции текстом и HTML в jQuery, позволяя гибко и эффективно управлять содержимым веб-страницы.

Оглавление