МОДУЛЬ 9 · УРОК 6

Создание и удаление элементов

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

⏱ ~25 минут 🎓 Новичок 🌐 DOM API

🏗️ createElement — создаём элемент в памяти

Метод document.createElement(тег) создаёт новый HTML-элемент. Важно понять: элемент создаётся только в памяти JavaScript — он ещё НЕ появляется на странице. Это как сделать деталь на заводе: она готова, но её ещё нужно установить.

// Создаём элементы в памяти
const newDiv = document.createElement('div');
const newP = document.createElement('p');
const newButton = document.createElement('button');

// Настраиваем их (пока они не видны на странице)
newP.textContent = 'Привет, я новый абзац!';
newButton.textContent = 'Нажми меня';
newButton.classList.add('btn');

💡 Хорошая практика: настраивай элемент (текст, классы, атрибуты) до добавления на страницу. Так браузер сделает только одну перерисовку вместо нескольких.

📌 Добавляем элемент на страницу

Есть несколько способов вставить элемент в DOM. У каждого — своё место вставки.

appendChild(el)

Добавляет элемент в конец родителя. Классика — используется чаще всего.

prepend(el)

Добавляет элемент в начало родителя (перед первым дочерним).

append(el, el2...)

Более гибкий вариант appendChild — принимает несколько элементов сразу и строки текста.

insertBefore(new, ref)

Вставляет элемент перед указанным дочерним элементом.

const list = document.querySelector('#myList');

// appendChild — в конец
const item1 = document.createElement('li');
item1.textContent = 'Первый пункт';
list.appendChild(item1);

// prepend — в начало
const item0 = document.createElement('li');
item0.textContent = 'Нулевой пункт (будет первым)';
list.prepend(item0);

// insertBefore — перед конкретным элементом
const refItem = list.children[1]; // второй <li>
const insertedItem = document.createElement('li');
insertedItem.textContent = 'Вставлен между первым и вторым';
list.insertBefore(insertedItem, refItem);

🗑️ Удаляем элементы. Клонируем.

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

const item = document.querySelector('.task-item');
item.remove(); // элемент удалён из DOM

Метод cloneNode(deep) создаёт копию элемента. Если передать true — скопируются и все дочерние элементы. Если false — только сам элемент без содержимого.

const original = document.querySelector('#template');

// Глубокое клонирование — со всем содержимым
const copy = original.cloneNode(true);
copy.id = 'template-copy'; // меняем id, чтобы не было дублей

document.querySelector('#container').appendChild(copy);

⚠️ Осторожно с id: если клонируешь элемент с атрибутом id — не забудь поменять id у копии. В HTML не должно быть двух одинаковых id.

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

Давайте соберём всё вместе — создадим мини-приложение: список задач с кнопкой добавления и кнопкой удаления каждого элемента.

HTML-структура:

<input id="taskInput" placeholder="Новая задача..." />
<button id="addBtn">Добавить</button>
<ul id="taskList"></ul>

JavaScript:

const input = document.querySelector('#taskInput');
const addBtn = document.querySelector('#addBtn');
const taskList = document.querySelector('#taskList');

addBtn.addEventListener('click', () => {
  const text = input.value.trim();

  if (!text) return; // если поле пустое — ничего не делаем

  // 1. Создаём <li>
  const li = document.createElement('li');

  // 2. Создаём текстовый span
  const span = document.createElement('span');
  span.textContent = text;

  // 3. Создаём кнопку удаления
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'Удалить';
  deleteBtn.addEventListener('click', () => {
    li.remove(); // удаляем весь <li> при клике
  });

  // 4. Собираем li из частей
  li.appendChild(span);
  li.appendChild(deleteBtn);

  // 5. Добавляем в список
  taskList.appendChild(li);

  // 6. Очищаем поле ввода
  input.value = '';
  input.focus();
});

Разберём что происходит: мы создаём <li>, добавляем в него <span> с текстом и <button> с обработчиком удаления. Затем добавляем готовый <li> в список. При нажатии «Удалить» — вызывается li.remove(), и элемент исчезает со страницы.

✅ Итоги урока

document.createElement('тег') — создаёт элемент в памяти (не на странице)
appendChild(el) — добавляет в конец родителя; prepend(el) — в начало
append() — современный вариант, принимает несколько аргументов и строки
insertBefore(новый, опорный) — вставляет перед конкретным дочерним элементом
element.remove() — удаляет элемент из DOM
cloneNode(true) — глубокое копирование элемента со всем содержимым
Настраивай элемент до добавления в DOM — меньше перерисовок страницы

В следующем уроке разберём работу с формами — как читать значения полей, обрабатывать submit и валидировать данные перед отправкой. 🚀