Создание и удаление элементов: createElement, appendChild, remove

Динамическое управление DOM — это просто! 🎨

JavaScript позволяет не только читать, но и изменять структуру страницы на лету. Давайте разберём три ключевых метода, которые превратят вас в настоящих архитекторов DOM!

Создаём элементы с помощью createElement() 🏗️

Метод document.createElement() — ваш строительный блок для динамического контента. Он создаёт новый HTML-элемент, который пока «висит в воздухе» и не прикреплён к странице.

// Создаём новый div-элемент
const newDiv = document.createElement('div');
newDiv.textContent = 'Я новый элемент!';
console.log(newDiv); // <div>Я новый элемент!</div> (но его ещё нет на странице)

💡 Важно: createElement принимает только имя тега ('div', 'p', 'button'), не HTML-строку!

Добавляем элементы методом appendChild() ✨

Теперь наш элемент нужно «посадить» в DOM. Самый простой способ — appendChild(), который добавляет элемент в конец выбранного родителя.

// Находим контейнер
const container = document.getElementById('app');

// Добавляем наш div в конец контейнера
container.appendChild(newDiv);

Но что если нужно вставить элемент в начало или между другими? Используйте insertBefore():

// Вставляем перед первым ребёнком
container.insertBefore(newDiv, container.firstChild);

Удаляем элементы через remove() 🗑️

Современный метод element.remove() делает удаление элемента простым и понятным:

// Удаляем наш div
newDiv.remove();

🔍 Для старых браузеров можно использовать parent.removeChild(child): javascript container.removeChild(newDiv);

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

Давайте создадим интерактивный список дел, где можно добавлять и удалять элементы:

// HTML: <ul id="todo-list"></ul> <button id="add-btn">Добавить</button>
const todoList = document.getElementById('todo-list');
const addBtn = document.getElementById('add-btn');

addBtn.addEventListener('click', () => {
  // Создаём новый пункт
  const newItem = document.createElement('li');
  newItem.textContent = `Задача ${todoList.children.length + 1}`;

  // Добавляем кнопку удаления
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = '×';
  deleteBtn.onclick = () => newItem.remove();

  newItem.appendChild(deleteBtn);
  todoList.appendChild(newItem);
});

Оптимизация производительности ⚡

При массовом добавлении элементов используйте DocumentFragment для минимизации перерисовок:

const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
  const item = document.createElement('div');
  item.textContent = i;
  fragment.appendChild(item);
}

document.body.appendChild(fragment); // Одна перерисовка вместо 100!

Важные нюансы работы с DOM 📌

1. Ссылки сохраняются: после добавления элемента переменная продолжает ссылаться на DOM-узел
2. Нельзя дублировать: один элемент нельзя добавить в несколько мест одновременно
3. Порядок имеет значение: appendChild всегда добавляет в конец

Альтернативы: insertAdjacentHTML и друзья 🛠️

Для работы со строками HTML удобен insertAdjacentHTML:

element.insertAdjacentHTML('beforeend', '<div>Новый элемент</div>');

Доступные позиции:

• beforebegin — перед элементом
• afterbegin — внутри, в начале
• beforeend — внутри, в конце (как appendChild)
• afterend — после элемента

Подведём итоги 🌟

Теперь вы умеете:

1. Создавать элементы (createElement)
2. Добавлять их в DOM (appendChild, insertBefore)
3. Удалять ненужное (remove)
4. Оптимизировать массовые операции (DocumentFragment)

Попробуйте создать динамическую галерею изображений или интерактивную форму — это отличный способ закрепить знания!