Управление div элементами: от создания до сложных анимаций

Раздел: Веб-разработка -> Работа с DOM (Document Object Model)

Основы работы с div в JavaScript

Элемент <div> является универсальным контейнером в HTML. С помощью JavaScript можно динамически создавать, изменять, перемещать и удалять такие блоки, управлять их стилями, содержимым и обработчиками событий. Ниже рассмотрены основные подходы, их преимущества и типичные проблемы.

Как создать новый div и добавить его в DOM?

Самый надёжный и производительный способ состоит из трёх шагов:

Создать элемент: document.createElement('div')
Настроить его содержимое, атрибуты и стили
Вставить в нужное место при помощи методов append, prepend, after, before или appendChild

const newDiv = document.createElement('div');
newDiv.textContent = 'Новый блок';
newDiv.classList.add('my-class');
document.body.append(newDiv);

Js div (работа с div в javascript)

В конец body будет добавлен блок с текстом и классом.

Этот подход гарантирует, что все созданные элементы будут корректно обработаны браузером, а ссылки на них останутся доступными. При работе с большим количеством элементов используйте DocumentFragment для пакетного добавления.

Ошибка: попытка вставить элемент, уже находящийся в DOM, приведёт к его перемещению, а не к копированию. Для копирования используйте cloneNode().

Как быстро добавить сложную HTML-структуру через строку?

Метод innerHTML позволяет задать содержимое элемента строкой с HTML-разметкой. Это удобно при создании больших фрагментов, но требует осторожности.

const container = document.querySelector('#container');
const html = 'Элемент';
container.innerHTML += html;

В контейнер будет дописана строка с div и span.

Проблема: вставка строки через innerHTML приводит к потере ссылок на все ранее созданные элементы внутри контейнера, а также к перерисовке всего внутреннего содержимого. Кроме того, если строка содержит пользовательские данные, возможна XSS-уязвимость.

Используйте textContent для обычного текста, а при необходимости вставки HTML - только надёжно экранированный контент.

Как вставить div до или после указанного элемента без замены содержимого?

Метод insertAdjacentHTML() принимает позицию ('beforebegin', 'afterbegin', 'beforeend', 'afterend') и строку HTML. Он не затрагивает существующее содержимое элемента.

const target = document.querySelector('.target');
target.insertAdjacentHTML('afterend', 'Вставленный блок
');

Новый div появится сразу после элемента с классом target.

Этот вариант быстрее innerHTML и не удаляет обработчики событий. Однако вставляемый фрагмент также может нести риски XSS, если не экранирован.

Как создать повторяющиеся блоки на основе шаблона?

Тег <template> хранит разметку, которую можно клонировать и наполнять данными без лишних DOM-операций.

const template = document.querySelector('#card-template');
const clone = template.content.cloneNode(true);
const titleNode = clone.querySelector('.title');
titleNode.textContent = 'Заголовок';
document.body.append(clone);

В body добавляется клон содержимого template с изменённым заголовком.

Ошибка: cloneNode(true) не копирует обработчики событий, привязанные через addEventListener. Назначайте их после вставки.

Как скопировать существующий div со всеми стилями?

Метод cloneNode(true) создаёт глубокую копию элемента, включая его дочерние узлы. Атрибуты и стили копируются, но не обработчики событий.

const original = document.querySelector('.original');
const copy = original.cloneNode(true);
document.body.append(copy);

В DOM появится копия блока с тем же содержимым и классами.

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

Как менять внешний вид div при нажатии кнопки без прямого манипулирования стилем?

Используйте classList.add, classList.remove и classList.toggle. Это позволяет разделить логику и представление.

const div = document.querySelector('.my-div');
div.addEventListener('click', () => {
  div.classList.toggle('active');
});

При клике на div будет добавляться или удаляться класс active, активируя CSS-правила.

Ошибка: прямое изменение style может переопределить стили из CSS. Классы позволяют избежать конфликтов и упрощают поддержку.

Как назначить обработчик на динамически созданный div?

Обработчики можно назначать сразу после создания элемента. Если div создаётся многократно, эффективнее использовать делегирование событий.

const newDiv = document.createElement('div');
newDiv.textContent = 'Кликни меня';
newDiv.addEventListener('click', () => alert('Был клик!'));
document.body.append(newDiv);

При клике на новый блок появится alert.

При массовом создании (например, в цикле) подписка на каждый элемент может снизить производительность. Вместо этого повесьте один обработчик на общего родителя и проверяйте event.target.

document.body.addEventListener('click', (e) => {
  if (e.target.classList.contains('dynamic')) {
    alert('Клик по динамическому div');
  }
});

Расширенные примеры работы с div

1. Создание шахматной доски

Генерируем 64 div в цикле, раскрашиваем через CSS-классы.

Пример

const board = document.querySelector('.board');
for (let row = 0; row < 8; row++) {
  for (let col = 0; col < 8; col++) {
    const cell = document.createElement('div');
    cell.classList.add('cell');
    if ((row + col) % 2 === 0) cell.classList.add('white');
    else cell.classList.add('black');
    board.append(cell);
  }
}

Будет сгенерирована сетка 8x8 с чередованием цветов.

2. Анимация движения div с requestAnimationFrame

Плавное перемещение блока по горизонтали.

Пример

const box = document.querySelector('.moving-box');
let position = 0;
function animate() {
  position += 1;
  if (position > 300) return;
  box.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Блок будет медленно двигаться вправо.

3. Модальное окно с затемнением

Создаём затемняющий фон и модальный div, закрываем по клику вне окна.

Пример

const overlay = document.createElement('div');
overlay.classList.add('overlay');
const modal = document.createElement('div');
modal.classList.add('modal');
modal.innerHTML = 'Модальное окно
';
document.body.append(overlay, modal);
overlay.addEventListener('click', (e) => {
  if (e.target === overlay) {
    overlay.remove();
    modal.remove();
  }
});
modal.querySelector('.close').addEventListener('click', () => {
  overlay.remove();
  modal.remove();
});

Откроется тёмный фон и окно. Закрытие происходит по клику на крестик или на фон.

4. Тултип при наведении

Создаём div с подсказкой, показываем его рядом с курсором.

Пример

const tip = document.createElement('div');
tip.classList.add('tooltip');
tip.textContent = 'Это подсказка!';
document.body.append(tip);
const target = document.querySelector('.has-tooltip');
target.addEventListener('mousemove', (e) => {
  tip.style.left = e.clientX + 10 + 'px';
  tip.style.top = e.clientY + 10 + 'px';
  tip.style.display = 'block';
});
target.addEventListener('mouseleave', () => {
  tip.style.display = 'none';
});

При наведении на целевой элемент появляется плавающая подсказка.

5. Динамический список задач (Todo) с удалением

Каждая задача - это div с кнопкой удаления. Удаление реализовано через делегирование.

Пример

const list = document.querySelector('.todo-list');
const input = document.querySelector('#todo-input');
document.querySelector('#add-btn').addEventListener('click', () => {
  const item = document.createElement('div');
  item.classList.add('todo-item');
  item.innerHTML = `${input.value} `;
  list.append(item);
});
list.addEventListener('click', (e) => {
  if (e.target.classList.contains('delete')) {
    e.target.closest('.todo-item').remove();
  }
});

При вводе текста и нажатии «Добавить» создаётся задача. Кнопка «Удалить» удаляет родительский div.

6. Использование data-атрибутов для хранения информации

Каждому div можно задать произвольные данные через dataset.

Пример

const userDiv = document.createElement('div');
userDiv.dataset.userId = '123';
userDiv.dataset.role = 'admin';
userDiv.textContent = 'Иван Иванов';
console.log(userDiv.dataset.userId); // '123'

Атрибуты data-user-id и data-role будут добавлены к элементу.

Работа с div в JavaScript - comments

Js div (javascript)