Как добавлять, удалять и изменять HTML-элементы с помощью JavaScript?

Question

Accepted Answer

## Базовый набор DOM API

1. Создать: `document.createElement()`
2. Заполнить текстом: `textContent`
3. Вставить: `append`, `prepend`, `before`, `after`, `replaceWith`, `appendChild`
4. Удалить: `remove()`
5. Менять классы/атрибуты: `classList`, свойства, `setAttribute`

---

## Добавление

```js
const el = document.createElement("div");
el.textContent = "Hello, World!";
document.body.append(el); // или appendChild
```

## Удаление

```js
const node = document.getElementById("elementId");
node?.remove();
```

## Изменение

```js
const node = document.getElementById("elementId");
if (node) {
  node.textContent = "New content";
  node.classList.add("active");
}
```

---

## Безопасность

Не подставляйте недоверенные строки в `innerHTML` — это XSS-sink. Для обычного текста — `textContent`. Если HTML нужен осознанно — санитизация.

---

## Как думает middle+

- Батчить вставки (DocumentFragment / один append списка).
- Не пересобирать весь контейнер ради одной строки.
- Следить за слушателями на удаляемых узлах.

**Итог:** создаёте узел → настраиваете → вставляете/заменяете/удаляете через DOM API; текст — через `textContent`.