JS: DOM — создание и изменение

Введение

На прошлом уроке мы научились выбирать элементы и менять их содержимое. Теперь — создание и удаление: JavaScript может создавать новые элементы, добавлять их на страницу и удалять. Это нужно для динамических списков, уведомлений, модальных окон.

Задачи

• Создавать элементы через createElement.
• Добавлять узлы в DOM: append, prepend, before, after, insertBefore.
• Удалять элементы через remove().
• Собирать динамические списки и блоки из данных.

createElement, append, remove

Чтобы добавить на страницу новый блок, его нужно сначала создать как DOM-элемент, затем вставить в дерево. document.createElement("тег") создаёт элемент в памяти; он появится на странице только после того, как его добавят к существующему узлу (например, в body или в выбранный контейнер).

Базовый пример

const div = document.createElement("div");
div.textContent = "Новый блок";
document.body.append(div);
 
elem.remove();

• createElement("div") создаёт пустой элемент <div>.
• textContent задаёт текстовое содержимое (теги не интерпретируются — в отличие от innerHTML).
• append(узел) добавляет узел в конец списка детей родителя. У одного родителя можно вызвать append(узел1, узел2) — добавятся оба.
• prepend(узел) вставляет в начало списка детей.
• elem.remove() удаляет элемент из DOM (со страницы). Переменная elem по-прежнему хранит ссылку на этот узел, но на странице его уже нет.

Создание списка

Списки в HTML строятся из <ul> или <ol> и элементов <li>. В JS создаём каждый <li> через createElement("li"), задаём текст и добавляем в список через append.

const ul = document.querySelector("ul");
const li = document.createElement("li");
li.textContent = "Новый пункт";
ul.append(li);

Пример: список из массива

Часто пункты списка берут из массива данных. Перебираем массив и для каждого значения создаём li, добавляем в ul:

const items = ["Яблоко", "Груша", "Слива"];
const ul = document.querySelector("ul");
for (const text of items) {
  const li = document.createElement("li");
  li.textContent = text;
  ul.append(li);

В результате на странице появится список из трёх пунктов. Если вызывать этот код повторно без очистки ul, пункты продублируются — перед заполнением можно очистить контейнер: ul.innerHTML = "" или ul.replaceChildren().

insertBefore, before, after

Когда нужно вставить элемент не в начало и не в конец, а перед или после другого узла, используют методы вставки относительно «соседа»:

parent.insertBefore(newNode, referenceNode);
elem.before(newElem);
elem.after(newElem);

• parent.insertBefore(newNode, referenceNode) — вставляет newNode в родителя parent перед узлом referenceNode. Если referenceNode равен null, узел добавляется в конец (как append).
• elem.before(newElem) — вставляет newElem перед elem (тот же родитель).
• elem.after(newElem) — вставляет после elem.

Это полезно, когда нужно вставить новую строку в таблицу, новый пункт между существующими или блок между двумя div.

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

Мы научились создавать элементы и управлять структурой DOM. На следующем уроке — практика, затем проект «Веб-квиз».

Типичные ошибки

• Использовать appendChild вместо append — оба работают, но append может принимать несколько аргументов.
• Забывать, что remove() удаляет элемент из DOM, но переменная ещё будет хранит ссылку.
• Вставлять узлы в неправильное место — append добавляет в конец, prepend — в начало.
• Создавать элементы в цикле без очистки контейнера — они будут дублироваться при повторном вызове.

Домашнее задание

Упражнение №1

Кнопка «Добавить пункт». По клику в список добавляется новый пункт с текстом «Пункт N» (N — номер).

Упражнение №2

Страница с пустым div. Спроси имя через prompt и создай элемент с приветствием. Добавь его в div.

Упражнение №3

Список из 5 пунктов. У каждого — кнопка «Удалить». По клику удаляется соответствующий пункт.

Упражнение №4

Поле ввода и кнопка. Вводишь текст — по клику создаётся карточка (div с текстом). Несколько карточек под полем.

Упражнение №5

Список дел: поле + кнопка «Добавить». Новое дело — в список. У каждого дела — чекбокс. При отметке — зачёркивание (класс или style).