Манипуляция DOM

document.createElement() создаёт новый элемент. append/prepend добавляют внутрь. before/after вставляют рядом. remove удаляет. Это основа динамических страниц.

Создание элемента: const div = document.createElement('div'); div.textContent = 'Привет!'; // Элемент создан, но ещё НЕ на странице!

Добавление на страницу:

• parent.append(child) — в конец родителя:

document.body.append(div); // div добавится в конец body

• parent.prepend(child) — в начало родителя:

document.body.prepend(div); // div добавится в начало body

• element.before(newEl) — перед элементом:

existingEl.before(div); // div появится перед existingEl

• element.after(newEl) — после элемента:

existingEl.after(div); // div появится после existingEl

Удаление:

element.remove(); // Удаляет элемент со страницы // Или: element.parentElement.removeChild(element);

Замена:

parent.replaceChild(newEl, oldEl); // Или: oldEl.replaceWith(newEl);

Перемещение:

element.append(otherElement); // Переместит otherElement в конец // Другие append/prepend/before/after тоже перемещают! // Если элемент уже в DOM — он переместится, не скопируется.

DOM-манипуляция — как работа с Lego. createElement — берёте новую детальку. append/prepend — ставите внутрь коробки. before/after — ставите рядом. remove — убираете с конвейера.

**Самый простой:**

// Создать и добавить элемент:
const h2 = document.createElement('h2');
h2.textContent = 'Заголовок';
document.body.append(h2);

createElement создаёт элемент. append добавляет на страницу.

**Простой:**

// Создать список:
const ul = document.createElement('ul');

['Яблоко', 'Банан', 'Вишня'].forEach(text => {
  const li = document.createElement('li');
  li.textContent = text;
  ul.append(li);
});

document.body.append(ul);

Цикл + createElement + append — стандартный паттерн создания списков.

**Реальный пример:**

// Динамическая карточка товара:
function createProductCard(product) {
  const card = document.createElement('div');
  card.className = 'product-card';
  card.innerHTML = `
    <h3>${product.name}</h3>
    <p>Цена: ${product.price} руб.</p>
    <button>Купить</button>
  `;
  return card;
}

const container = document.querySelector('#products');
const products = [
  { name: 'Телефон', price: 500 },
  { name: 'Ноутбук', price: 1200 }
];

products.forEach(p => {
  container.append(createProductCard(p));
});

Функция-фабрика + createElement + innerHTML + append — создание сложных компонентов.

**Неправильно:** Думать, что append копирует элемент

**Почему:** append ПЕРЕМЕЩАЕТ элемент. Если он уже в DOM — будет перемещён.

**Правильно:** Для копии: element.cloneNode(true)

**Неправильно:** Использовать appendChild вместо append

**Почему:** appendChild — старый метод. append — современный, принимает строки и несколько элементов.

**Правильно:** Используйте append (современный API).

**Неправильно:** Забывать, что createElement не добавляет на страницу

**Почему:** createElement создаёт в памяти. Без append/prepend элемент не виден.

**Правильно:** createElement → append/prepend → элемент на странице.

**Неправильно:** Использовать innerHTML для добавления новых элементов

**Почему:** innerHTML пересоздаёт ВСЕ дочерние элементы (теряются обработчики событий).

**Правильно:** Для добавления — createElement + append. innerHTML — только для начальной загрузки.

• createElement создаёт элемент (не на странице!)
• append — в конец, prepend — в начало
• before/after — рядом с элементом
• remove — удаляет элемент
• append перемещает, не копирует

Назад: Вы знаете атрибуты и свойства (D5) — теперь вы можете создавать элементы и управлять ими.

Вперёд: Следующий урок (D7) — стили: как менять CSS-классы и инлайновые стили.