Урок 6: Манипуляции с DOM в jQuery (создание, добавление и удаление элементов)

И это уже шестой урок из нашего курса по jQuery для начинающих. Мы уже многое узнали, как выбирать элементы на странице, работать с их содержимым и обрабатывать события. Но по-настоящему интерактивным и «живым» сайт становится тогда, когда он может динамически менять свою структуру. Создавать новые блоки, добавлять их, удалять старые или заменять одни элементы другими.

Именно этим мы сегодня и займемся. Мы научимся полноценно управлять DOM, объектной моделью документа. Это как если бы у нас в руках был конструктор, детали которого, это HTML-элементы, а jQuery наши руки, которые могут собирать, разбирать и перестраивать этот конструктор прямо на лету.

В этом уроке мы рассмотрим три ключевых навыка. Создание новых элементов, их добавление в нужное место на странице и удаление или замену. В качестве практического задания мы создадим динамический список дел (To-Do), который вы сможете встроить в любой свой проект.

Создание новых элементов: $(‘<div>Hello</div>’)

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

Для создания нового элемента мы используем наш главный инструмент, это функцию $(). Но на этот раз мы передаем в нее не селектор для поиска существующего элемента, а строку, содержащую HTML-разметку нового элемента. Например, чтобы создать новый div с текстом «Привет, мир!», мы напишем: $('<div>Привет, мир!</div>'). Таким же образом можно создавать элементы любой сложности: списки, параграфы, кнопки, формы, все, что позволяет HTML.

Давайте рассмотрим пример. Допустим, мы хотим создать кнопку. Мы можем написать так:

var $newButton = $('<button class="btn">Новая кнопка</button>');

Обратите внимание на несколько моментов. Во-первых, мы присваиваем созданный элемент переменной. Это очень хорошая практика, так как позволяет нам потом ссылаться на этот элемент, не создавая его заново. Во-вторых, я использовал в названии переменной знак доллара ($newButton). Это необязательно, но это распространенное соглашение среди разработчиков, которое помогает визуально отличать jQuery-объекты от других переменных. В-третьих, мы сразу можем задать нашему элементу любые атрибуты, такие как класс, идентификатор (id), data-атрибуты и так далее, прямо в HTML-строке.

Что происходит «под капотом»? Когда jQuery видит, что в функцию $() передана строка, начинающаяся с <, он понимает, что нужно не искать элемент, а создать его. Он парсит эту строку, создает соответствующий DOM-объект и оборачивает его в jQuery-объект, чтобы мы могли сразу применять к нему все знакомые нам методы.

Созданный таким образом элемент пока что «виснет в воздухе». Он есть в памяти браузера, но он еще не является частью страницы и пользователь его не видит. Это как приготовить деталь конструктора, но еще не прикрепить ее к самой модели. Чтобы элемент появился на странице, его нужно куда-то добавить. И как раз о способах добавления мы поговорим дальше.

Практическая задача: Создайте новый элемент списка <li> с текстом «Пункт 1» и сохраните его в переменную с именем $newListItem.

Добавление элементов в DOM: .append(), .prepend(), .after(), .before()

Итак, у нас есть новый элемент, созданный в недрах JavaScript. Теперь наша задача поместить его в DOM-дерево, то есть на веб-страницу, в конкретное место. jQuery предлагает несколько мощных и точных методов для решения этой задачи. Давайте разберем их все по порядку.

.append() и .prepend()

Эти методы используются для добавления элементов внутрь другого элемента.

• .append(содержимое). Добавляет указанное содержимое в конец выбранного элемента. Представьте себе коробку. .append() кладет новую игрушку на дно этой коробки.

  javascript

  // Добавим новый пункт в конец списка с id="myList"
  $('#myList').append('<li>Новый пункт в конце</li>');
  
  // Или добавим элемент из переменной
  var $newItem = $('<li>Новый пункт из переменной</li>');
  $('#myList').append($newItem);

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

  javascript

  // Добавим новый пункт в начало списка
  $('#myList').prepend('<li>Новый пункт в начале</li>');

.before() и .after()

Эти методы работают иначе. Они добавляют элементы не внутрь, а рядом с выбранным элементом, на одном с ним уровне иерархии DOM.

• .before(содержимое). Вставляет указанное содержимое перед выбранным элементом.

  javascript

  // Вставим красный разделитель перед вторым пунктом списка
  $('li').eq(1).before('<li style="color: red;">--- Разделитель ---</li>');

• .after(содержимое). Вставляет указанное содержимое после выбранного элемента.

  javascript

  // Добавим кнопку "Удалить" после каждого пункта списка
  $('li').after('<button class="delete-btn">Удалить</button>');

Очень важно понимать разницу между этими двумя парами методов. .append() и .prepend() изменяют содержимое родительского элемента, добавляя ему потомков. .before() и .after() же изменяют структуру на одном уровне с целевым элементом, добавляя ему «братьев» или «сестер».

Практическая задача: У вас есть пустой div с id=»container». С помощью jQuery:

1. Добавьте в него заголовок <h2>Мой список</h2> в самое начало.

2. Добавьте в него пустой список <ul></ul> в конец.

3. Перед всем блоком #container добавьте абзац с текстом «Список дел на сегодня:».

4. После блока #container добавьте кнопку «Добавить дело».

Удаление и замена элементов: .remove(), .empty(), .replaceWith()

Умение добавлять элементы бесполезно без возможности их убирать. В динамическом интерфейсе элементы должны не только появляться, но и исчезать. Будь то закрытое всплывающее окно, удаленная задача из списка или обновленный виджет. В jQuery есть три основных метода для «зачистки».

.empty()

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

// Очистим содержимое блока с сообщением
$('#message-box').empty();

После выполнения этого кода блок #message-box будет абсолютно пустым. Все его дочерние элементы (текст, картинки, другие блоки) будут безвозвратно удалены из DOM. Это как высыпать все игрушки из коробки, чтобы наполнить ее чем-то другим.

.remove()

Метод .remove() более радикален. Он полностью удаляет выбранный элемент (или группу элементов) из DOM, включая сам контейнер и все его содержимое.

// Удалим весь список с страницы
$('#myList').remove();

// Удалим все кнопки с классом .delete-btn
$('.delete-btn').remove();

Этот метод полезен, когда элемент больше не нужен. Например, когда пользователь удаляет карточку товара из корзины или закрывает вкладку. Важно отметить, что .remove() не только убирает элемент со страницы, но и удаляет все связанные с ним обработчики событий и данные, что помогает предотвратить утечки памяти.

.replaceWith()

Иногда простого удаления недостаточно. Нужно заменить один элемент на другой. Для этого идеально подходит метод .replaceWith(новыйЭлемент).

// Заменим старый заголовок на новый
$('#old-header').replaceWith('<h1 id="new-header">Новый заголовок!</h1>');

// Заменим все элементы <b> на более семантически правильные <strong>
$('b').replaceWith(function() {
  return $('<strong></strong>').html($(this).html());
});

Этот метод находит выбранный элемент в DOM и заменяет его на указанный вами HTML или jQuery-объект. Это мощный инструмент для кардинального обновления частей интерфейса.

Практическая задача: Создайте несколько параграфов <p> на странице. Напишите код, который:

1. Удалит последний параграф на странице.

2. Очистит содержимое предпоследнего параграфа.

3. Заменит первый параграф на блок <div> с текстом «Я был первым, но меня заменили».

Создаем динамический список «To-Do» (можно добавлять и удалять задачи)

Теперь давайте соберем все полученные знания воедино и создадим небольшое, но полностью функциональное приложение, это список дел (To-Do List). Пользователь сможет вводить новую задачу в поле ввода, добавлять ее в список нажатием кнопки и удалять задачу, щелкая на соответствующую кнопку рядом с ней.

Шаг 1: Подготовка HTML-разметки

Начнем с базовой HTML-структуры. Нам понадобится поле ввода, кнопка для добавления и контейнер для самого списка.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Мой To-Do List</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        .completed {
            text-decoration: line-through;
            color: #999;
        }
        .delete-btn {
            margin-left: 10px;
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Мой Список Дел</h1>
    <input type="text" id="new-task" placeholder="Введите новую задачу...">
    <button id="add-btn">Добавить</button>
    <ul id="task-list"></ul>

    <script>
        // Здесь будет наш JavaScript код
    </script>
</body>
</html>

Шаг 2: Пишем логику на jQuery

Весь наш код мы поместим внутрь блока <script> и обернем в $(document).ready(), чтобы он выполнился только после полной загрузки DOM.

$(document).ready(function() {
    // Обработчик клика на кнопку "Добавить"
    $('#add-btn').on('click', function() {
        // 1. Получаем текст из поля ввода
        var taskText = $('#new-task').val().trim();

        // 2. Проверяем, не пустое ли поле
        if (taskText === '') {
            alert('Введите задачу!');
            return; // Прерываем выполнение функции
        }

        // 3. Создаем новый элемент списка
        // Вместе с кнопкой удаления и чекбоксом
        var $newTaskItem = $('<li></li>');
        var $taskSpan = $('<span></span>').text(taskText);
        var $deleteButton = $('<span class="delete-btn">[Удалить]</span>');
        var $checkbox = $('<input type="checkbox">');

        // 4. Собираем элемент воедино
        $newTaskItem.append($checkbox);
        $newTaskItem.append($taskSpan);
        $newTaskItem.append($deleteButton);

        // 5. Добавляем новый элемент в конец списка
        $('#task-list').append($newTaskItem);

        // 6. Очищаем поле ввода
        $('#new-task').val('');
    });

    // Обработчик для удаления задачи (используем делегирование событий!)
    $('#task-list').on('click', '.delete-btn', function() {
        // Находим родительский <li> и удаляем его
        $(this).closest('li').remove();
    });

    // Обработчик для отметки задачи как выполненной
    $('#task-list').on('change', 'input[type="checkbox"]', function() {
        // Находим ближайший <span> с текстом задачи и переключаем класс
        $(this).siblings('span').toggleClass('completed', this.checked);
    });

    // (Бонус) Добавление задачи по нажатию Enter
    $('#new-task').on('keypress', function(e) {
        if (e.which === 13) { // Код клавиши Enter
            $('#add-btn').click(); // Имитируем клик по кнопке
        }
    });
});

Разберем ключевые моменты кода:

1. Добавление задачи. При клике на кнопку мы создаем целую структуру: <li>, внутри него <span> с текстом, кнопку удаления и чекбокс. Мы используем .append() для сборки этого конструктора и затем добавляем готовый элемент в список #task-list.

2. Удаление задачи. Мы не назначаем обработчик напрямую каждой кнопке «Удалить», потому что они создаются динамически. Вместо этого мы используем делегирование событий. Мы вешаем один обработчик на родительский список #task-list, который «прослушивает» события клика на элементах с классом .delete-btn, даже если они появятся в будущем. Внутри обработчика $(this).closest('li') находит ближайший родительский <li> (то есть всю задачу) и удаляет его с помощью .remove().

3. Отметка о выполнении. Аналогично, с помощью делегирования, мы обрабатываем изменение состояния чекбокса. Метод .toggleClass('completed', this.checked) добавляет или убирает класс completed у текстового <span> в зависимости от того, отмечен чекбокс или нет. Стили класса completed (зачеркивание и серый цвет) определены в CSS.

Что можно улучшить:

• Добавьте возможность редактирования задачи двойным щелчком по ее тексту.

• Реализуйте сохранение списка в Local Storage, чтобы задачи не пропадали при обновлении страницы.

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

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

Это был урок 6 из серии «jQuery для начинающих». Если вы хотите получить структурированные знания от основ до создания полноценных проектов, приглашаю вас на полный курс с уроками по jQuery для начинающих. Там вас ждут видеоуроки, дополнительные материалы, практические задания и поддержка.