📘 Урок 6: Добавление, клонирование и удаление элементов — `append()`, `prepend()`, `clone()`, `remove()`, `empty()` и другие

Цель: научиться динамически добавлять, копировать и удалять HTML-элементы на странице при помощи jQuery. Это особенно полезно при создании динамичных интерфейсов — например, списков задач, карточек товаров, комментариев и т. д.

---

🔹 Введение

Одна из ключевых задач jQuery — работа с DOM. Это значит, что ты можешь:

• Добавлять новые элементы в HTML,

• Удалять или очищать существующие,

• Клонировать и вставлять уже созданные элементы.

Эти действия выполняются с помощью удобных методов.

---

🔸 append() и prepend()

Оба метода вставляют новый HTML внутрь другого элемента:

Метод	Чтоделает
append()	Добавляет в конец элемента
prepend()	Добавляет в начало элемента

---

📌 Примеры:

$('#list').append('<li>Новый пункт</li>');
$('#list').prepend('<li>Первый пункт</li>');

📦 HTML до:

<ul id="list">
  <li>Пункт 1</li>
</ul>

📦 После вызова append():

<ul id="list">
  <li>Пункт 1</li>
  <li>Новый пункт</li>
</ul>

---

🔸 after() и before()

Эти методы добавляют вне целевого элемента:

Метод	Чтоделает
after()	Вставляет после элемента
before()	Вставляет перед элементом

---

📌 Пример:

$('h2').after('<p>Текст после заголовка</p>');
$('h2').before('<hr>');

---

🔸 clone()

Метод clone() копирует элемент. По умолчанию без событий, но можно указать true, чтобы скопировать и обработчики.

---

📌 Пример:

let copy = $('.note').clone();
$('#container').append(copy);

С обработчиками:

let copy = $('.note').clone(true);

📦 Полезно для:

• Шаблонов карточек товаров,

• Модальных окон,

• Генерации форм или полей.

---

🔸 remove() и empty()

Метод	Чтоделает
remove()	Удаляет элемент полностью из DOM
empty()	Удаляет только содержимое

---

📌 Примеры:

$('#block').remove(); // удалит сам <div id="block">
$('#block').empty();  // очистит, но оставит <div>

---

🔸 Пример: динамический список задач

<ul id="tasks"></ul>
<input type="text" id="taskInput">
<button id="addTask">Добавить</button>

<script>
  $('#addTask').click(function() {
    let text = $('#taskInput').val();
    if (text !== '') {
      $('#tasks').append('<li>' + text + '</li>');
      $('#taskInput').val('');
    }
  });
</script>

📌 Что делает код:

• Получает текст из поля ввода,

• Создаёт элемент <li> и добавляет его в список,

• Очищает поле ввода.

---

🔸 Пример: клонирование карточки

<div class="card">
  <p>Товар</p>
</div>

<button id="cloneCard">Скопировать</button>

<script>
  $('#cloneCard').click(function() {
    let card = $('.card').first().clone();
    $('body').append(card);
  });
</script>

---

🔸 Практика: удаление элемента по клику

<ul id="items">
  <li>Пункт 1 <button class="del">Удалить</button></li>
  <li>Пункт 2 <button class="del">Удалить</button></li>
</ul>

<script>
  $('#items').on('click', '.del', function() {
    $(this).parent().remove();
  });
</script>

📌 Обрати внимание: здесь используется делегирование события через .on().

---

🔸 Работа с шаблонами

Можно заранее создать шаблон элемента и вставлять его при необходимости:

<template id="itemTemplate">
  <li>Шаблон <button class="del">Удалить</button></li>
</template>

<button id="add">Добавить</button>

<script>
  $('#add').click(function() {
    let template = $('#itemTemplate').html();
    $('#items').append(template);
  });
</script>

---

🔸 Советы и best practices

• Используй clone(true) только при необходимости копировать обработчики.

• Для больших блоков — предпочтительнее template или innerHTML, а не append() по кускам.

• Всегда проверяй содержимое перед вставкой в DOM — это помогает избежать XSS и ошибок.

• Не забывай удалять лишние элементы, если они больше не нужны — это экономит память.

---

❗ Частые ошибки

❌ Забыл добавить обработчик к скопированному элементу

✅ Используй clone(true) или делегирование:

$('#container').on('click', '.btn', function() {
  alert('нажата кнопка');
});

---

❌ Случайное перезаписывание содержимого

✅ Используй append() вместо html():

$('#list').append('<li>Новое</li>'); // добавит
$('#list').html('<li>Новое</li>');   // заменит всё

---

❌ Попытка использовать remove() на нескольких элементах, не проверяя их наличие

✅ Проверяй length, если не уверен:

if ($('.popup').length) {
  $('.popup').remove();
}

---

📋 Упражнения

1. Сделай кнопку, которая добавляет в список случайное число.

2. Клонируй последний блок .card и вставляй его в конец.

3. Сделай список задач, где каждую можно удалить.

4. Добавляй блоки с текстом из поля ввода, при этом очищай поле после добавления.

---

📌 Заключение

Методы добавления, клонирования и удаления — это фундамент для создания интерактивных интерфейсов. С ними ты можешь создавать динамические списки, формы, карточки, блоки — и всё это без перезагрузки страницы.