From 8a5a6adbeca49f76d8505246c321b49ffd8f9c5b Mon Sep 17 00:00:00 2001 From: Jvst Me Date: Sun, 14 Apr 2024 23:51:01 +0200 Subject: [PATCH] New chapter: Adding and Removing Elements in DOM --- src/SUMMARY.md | 1 + .../adding_and_removing_elements_in_dom.md | 92 +++++++++++++++++++ 2 files changed, 93 insertions(+) create mode 100644 src/web_apis/adding_and_removing_elements_in_dom.md diff --git a/src/SUMMARY.md b/src/SUMMARY.md index cfdbad9..20ae666 100644 --- a/src/SUMMARY.md +++ b/src/SUMMARY.md @@ -50,3 +50,4 @@ - [События](web_apis/events.md) - [Поля ввода](web_apis/input_fields.md) - [События полей ввода](web_apis/input_fields_events.md) + - [Добавление и удаление элементов в DOM](web_apis/adding_and_removing_elements_in_dom.md) diff --git a/src/web_apis/adding_and_removing_elements_in_dom.md b/src/web_apis/adding_and_removing_elements_in_dom.md new file mode 100644 index 0000000..6e24657 --- /dev/null +++ b/src/web_apis/adding_and_removing_elements_in_dom.md @@ -0,0 +1,92 @@ +# Добавление и удаление элементов в DOM + +Ранее мы рассматривали, как работать с элементами, находящимися в DOM. Но на многих страницах набор элементов на странице не фиксирован — элементы могут добавляться и удаляться из DOM по мере взаимодействия пользователя со страницей. Рассмотрим несколько методов, которые позволяют это реализовать. + +> 🚩 Далее мы для простоты рассмотрим методы `appendChild`, `insertBefore` и `remove` только на примере элементов. На самом деле их можно использовать не только с элементами, но и с другими типами узлов, например с текстовыми узлами. + +### `document.createElement(tagName)` + +Перед тем как добавить на страницу новый элемент, его нужно создать. Для этого необходимо вызвать метод `document.createElement`, передав в него название HTML-тега. Метод возвращает объект нового элемента. + +```js +const button = document.createElement("button"); +``` + +Такой элемент уже существует в памяти браузера, но ещё не добавлен в DOM и, соответственно, не виден пользователю. Однако с ним уже можно совершать те же действия, что и с элементами в DOM, например добавлять текст и обработчики событий. + +```js +function sayHi() { + alert("Hello world"); +} + +button.innerText = "Press me"; +button.addEventListener("click", sayHi); +button; // Возвращает: элемент +``` + +### `element.appendChild(childElement)` + +Когда элемент создан, его можно добавить внутрь другого элемента. Для этого нужно у существующего родительского элемента вызвать метод `appendChild` и передать в него новый дочерний элемент. Если внутри родительского элемента уже есть другие дочерние элементы, то новый элемент будет добавлен в конец, после них. + +```js +const body = document.querySelector("body"); +body.appendChild(button); +// теперь на странице есть кнопка, созданная в предыдущем примере +``` + +### `element.insertBefore(newElement, referenceElement)` + +Если элемент нужно добавить не в конец, а в конкретное место внутри родительского элемента, можно воспользоваться методом родительского элемента `insertBefore`. Метод принимает два аргумента: новый дочерний элемент и существующий дочерний элемент, перед которым нужно вставить новый. + +```html + +``` +```js +const newItem = document.createElement("li"); +newItem.innerText = "2"; + +const list = document.querySelector("ul"); +const lastItem = list.querySelectorAll("li")[1]; +list.insertBefore(newItem, lastItem); +// теперь в списке между элементами "1" и "3" есть элемент "2" +``` + +### `element.remove()` + +Чтобы удалить элемент из DOM, можно вызвать метод этого элемента `remove`. При этом элемент всё ещё останется в памяти браузера, поэтому при необходимости с ним можно совершать любые действия, например вернуть обратно в DOM. + +```html + +``` +```js +const list = document.querySelector("ul"); +const itemThree = list.querySelector("li"); +itemThree.remove(); // удалили элемент "3" из списка +list.appendChild(itemThree); // добавили тот же элемент в конец списка +``` + +## Упражнения + +1. Реализуй страницу, при загрузке которой пользователь вводит в диалоговом окне целое положительное число, после чего на странице появляется список чисел от 1 до введённого числа. + +1. Реализуй страницу списка покупок. Пользователь вводит название продукта в поле ввода, нажимает кнопку "Добавить", после чего продукт добавляется в конец списка, а поле очищается. Если пользователь нажимает на продукт, находящийся в списке, это значит, что продукт куплен, поэтому он удаляется из списка. + +1. Реализуй страницу для отметки присутствующих на занятии в университете. Преподаватель вводит в поле ввода фамилию студента и нажимает кнопку "Добавить", фамилия добавляется в список присутствующих так, чтобы список всегда был отсортирован по алфавиту. + +1. Реализуй страницу с таблицей умножения. Размер таблицы пользователь задаёт через поля "Строк" и "Столбцов". Как только пользователь меняет значение в одном из полей, размер таблицы должен автоматически меняться. + + Например, если пользователь в поле "Строк" указал `4`, а в поле "Столбцов" — `5`, то таблица будет выглядеть так: + + + + + + +
12345
246810
3691215
48121620