New chapter: Adding and Removing Elements in DOM

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)

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;  // Возвращает: элемент <button>Press me</button>
+```
+
+### `element.appendChild(childElement)`
+
+Когда элемент создан, его можно добавить внутрь другого элемента. Для этого нужно у существующего родительского элемента вызвать метод `appendChild` и передать в него новый дочерний элемент. Если внутри родительского элемента уже есть другие дочерние элементы, то новый элемент будет добавлен в конец, после них.
+
+```js
+const body = document.querySelector("body");
+body.appendChild(button);
+// теперь на странице есть кнопка, созданная в предыдущем примере
+```
+
+### `element.insertBefore(newElement, referenceElement)`
+
+Если элемент нужно добавить не в конец, а в конкретное место внутри родительского элемента, можно воспользоваться методом родительского элемента `insertBefore`. Метод принимает два аргумента: новый дочерний элемент и существующий дочерний элемент, перед которым нужно вставить новый.
+
+```html
+<ul>
+    <li>1</li>
+    <li>3</li>
+</ul>
+```
+```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
+<ul>
+    <li>3</li>
+    <li>1</li>
+    <li>2</li>
+</ul>
+```
+```js
+const list = document.querySelector("ul");
+const itemThree = list.querySelector("li");
+itemThree.remove();           // удалили элемент "3" из списка
+list.appendChild(itemThree);  // добавили тот же элемент в конец списка
+```
+
+## Упражнения
+
+1. Реализуй страницу, при загрузке которой пользователь вводит в диалоговом окне целое положительное число, после чего на странице появляется список чисел от 1 до введённого числа.
+
+1. Реализуй страницу списка покупок. Пользователь вводит название продукта в поле ввода, нажимает кнопку "Добавить", после чего продукт добавляется в конец списка, а поле очищается. Если пользователь нажимает на продукт, находящийся в списке, это значит, что продукт куплен, поэтому он удаляется из списка.
+
+1. Реализуй страницу для отметки присутствующих на занятии в университете. Преподаватель вводит в поле ввода фамилию студента и нажимает кнопку "Добавить", фамилия добавляется в список присутствующих так, чтобы список всегда был отсортирован по алфавиту.
+
+1. Реализуй страницу с таблицей умножения. Размер таблицы пользователь задаёт через поля "Строк" и "Столбцов". Как только пользователь меняет значение в одном из полей, размер таблицы должен автоматически меняться.
+
+    Например, если пользователь в поле "Строк" указал `4`, а в поле "Столбцов" — `5`, то таблица будет выглядеть так:
+
+    <table>
+        <tr><td><b>1</b></td><td><b>2</b></td><td><b>3</b></td><td><b>4</b></td><td><b>5</b></td></tr>
+        <tr><td><b>2</b></td><td>4</td><td>6</td><td>8</td><td>10</td></tr>
+        <tr><td><b>3</b></td><td>6</td><td>9</td><td>12</td><td>15</td></tr>
+        <tr><td><b>4</b></td><td>8</td><td>12</td><td>16</td><td>20</td></tr>
+    </table>