Урок 35 из 114 · 8 мин

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

createElement, append, prepend, remove, replaceChildren и сборка списка из массива.

Список из данных

Каждый раз, когда меняется список товаров, я правлю HTML руками.
Ника
Пусть список живёт в массиве, а страница строится из него. Поменял массив — поменялась страница.

Метод

createElement()

Что это: document.createElement("li") — новый элемент, пока не на странице.
Зачем: Карточки, строки, пункты списка из данных.
Как: JavaScript
const li = document.createElement("li"); li.textContent = "Блокнот"; document.querySelector("ul").append(li);
Так это работает

Метод

append() · prepend()

Что это: parent.append(el) — в конец, prepend — в начало. Можно передать строку — вставится как текст.
Зачем: Добавить новый заказ в список.
Как: JavaScript
const ul = document.querySelector("ul"); ul.append("Пенал"); ul.prepend("Сначала: ");
Так это работает

Метод

remove()

Что это: el.remove() — элемент исчезает со страницы.
Зачем: Убрать позицию из корзины.
Как: JavaScript
document.querySelector(".old").remove(); console.log(document.querySelectorAll("li").length);
Так это работает

Метод

replaceChildren()

Что это: Удаляет всех детей и вставляет новых. Без аргументов — очищает.
Зачем: Перерисовать список целиком.
Как: JavaScript
document.querySelector("ul").replaceChildren(); console.log("Пусто");
Так это работает

Ваш ход

Задание

Для каждого товара из items создай <li> с текстом вида Блокнот — 220 ₽ и добавь его в #menu.

const items = [
  { name: "Блокнот", price: 220 },
  { name: "Пенал", price: 290 }
];

const items = [
  { name: "Блокнот", price: 220 },
  { name: "Пенал", price: 290 }
];

Результат обновляется при вводе

ПрактикаОбязательное задание

Выберите один ответ.

Появится ли на странице элемент сразу после document.createElement("li")?

Домашнее заданиеДля закрепления

Выберите один ответ.

Как удалить элемент el со страницы?