Работа с HTML-содержимым

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

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

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

  • Получение текста:
var content = $('#element').text();

Возвращает текстовое содержимое всех выбранных элементов, объединяя их в одну строку.

  • Изменение текста:
$('#element').text('Новый текст');

Заменяет текст внутри элемента, при этом HTML-разметка игнорируется.

  • Использование функции для динамического изменения текста:
$('li').text(function(index, oldText) {
    return index + ': ' + oldText;
});

Функция получает индекс элемента и его текущий текст, что позволяет создавать динамический контент.

Работа с HTML-разметкой

Метод .html() позволяет работать с внутренней HTML-разметкой элементов.

  • Получение HTML:
var htmlContent = $('#container').html();

Возвращает строку с HTML-кодом внутреннего содержимого.

  • Изменение HTML:
$('#container').html('<p>Новый параграф</p>');

Заменяет содержимое элемента, включая всю HTML-разметку.

  • Динамическое изменение HTML:
$('.item').html(function(index, oldHtml) {
    return '<strong>' + oldHtml + '</strong>';
});

Позволяет модифицировать существующую разметку для каждого элемента индивидуально.

Добавление и удаление контента

Для добавления содержимого используются методы .append(), .prepend(), .after() и .before():

  • .append() — добавляет содержимое внутрь выбранного элемента в конец:
$('#list').append('<li>Новый элемент</li>');
  • .prepend() — добавляет содержимое внутрь выбранного элемента в начало:
$('#list').prepend('<li>Первый элемент</li>');
  • .after() — вставляет содержимое после выбранного элемента в DOM:
$('#item').after('<div>Следующий блок</div>');
  • .before() — вставляет содержимое перед выбранным элементом:
$('#item').before('<div>Предыдущий блок</div>');

Для удаления содержимого используется .empty(), а для удаления элемента вместе с его содержимым — .remove():

$('#container').empty(); // Удаляет все внутренние элементы
$('#container').remove(); // Удаляет сам контейнер и всё внутри

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

Метод .val() предназначен для работы со значениями <input>, <select> и <textarea>:

  • Получение значения:
var value = $('#inputField').val();
  • Установка значения:
$('#inputField').val('Новое значение');
  • Динамическое задание значений:
$('input[type="text"]').val(function(index, oldValue) {
    return oldValue.toUpperCase();
});

Клонирование и замена элементов

  • .clone() — создает копию элемента, включая его содержимое и атрибуты:
var clone = $('#original').clone();
$('#container').append(clone);
  • .replaceWith() — заменяет выбранный элемент новым содержимым:
$('#oldElement').replaceWith('<div id="newElement">Новый элемент</div>');
  • .replaceAll() — заменяет целевые элементы содержимым другого элемента:
$('<p>Замененный текст</p>').replaceAll('.target');

Фильтрация и выбор подэлементов

Для работы с подэлементами удобно использовать .find() и фильтры:

$('#container').find('li.active').text('Активный элемент');

Метод .children() позволяет работать только с непосредственными потомками:

$('#container').children('p').css('color', 'blue');

Манипуляции с атрибутами и свойствами

Хотя .html() и .text() управляют содержимым, часто требуется работать с атрибутами:

  • .attr() — для чтения и записи атрибутов:
$('#link').attr('href', 'https://example.com');
  • .prop() — для управления свойствами DOM, например checked у чекбоксов:
$('#checkbox').prop('checked', true);

События при изменении контента

jQuery позволяет реагировать на изменения элементов с помощью событий. Для элементов формы часто используется .change():

$('#inputField').change(function() {
    console.log('Значение изменено:', $(this).val());
});

Для динамически добавленных элементов используют делегирование через .on():

$(document).on('click', '.dynamic-button', function() {
    $(this).text('Нажато');
});

Использование цепочек методов

jQuery поддерживает цепочку вызовов, что позволяет компактно изменять несколько свойств сразу:

$('#container')
    .html('<p>Новый текст</p>')
    .css('color', 'red')
    .fadeIn(500);

Цепочки повышают читаемость и сокращают код.

Практические советы

  • Для оптимизации производительности хранить результаты селекторов в переменной:
var $items = $('#list li');
$items.text('Обновлено');

  • Предпочтительно использовать .text() для безопасного добавления текста и .html() только для доверенной разметки.

  • Для работы с динамическими элементами применять делегирование событий через $(document).on(), чтобы обработчики срабатывали на элементах, добавленных после загрузки страницы.

  • Методы добавления контента (append, prepend, after, before) можно комбинировать с функциями для генерации динамического HTML в зависимости от текущего состояния документа.

  • Клонирование элементов через .clone(true) сохраняет все обработчики событий, что важно при копировании интерактивных блоков.

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

Оглавление