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

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

createElement и append

Метод document.createElement() создаёт новый элемент. Пока это просто объект в памяти — на странице он появится, когда вы добавите его в другой элемент методом append():

<ul id="list"></ul>
 
<script>
  const item = document.createElement('li');
  item.textContent = 'Чай';
 
  document.querySelector('#list').append(item);
</script>

append() добавляет элемент в конец, после всего, что уже есть внутри.

Куда вставить

Кроме append() есть ещё три метода вставки. Все они принимают элементы или обычные строки:

Метод	Куда вставляет
`parent.append(el)`	В конец родителя
`parent.prepend(el)`	В начало родителя
`el.before(other)`	Перед элементом, снаружи
`el.after(other)`	После элемента, снаружи

<ul id="list">
  <li>Второй</li>
</ul>
 
<script>
  const first = document.createElement('li');
  first.textContent = 'Первый';
 
  document.querySelector('#list').prepend(first);
</script>

Список из массива

Обычно элементы строят в цикле по массиву данных — так получаются списки, таблицы и карточки:

<ul id="list"></ul>
 
<script>
  const list = document.querySelector('#list');
  const drinks = ['Чай', 'Кофе', 'Сок'];
 
  for (const name of drinks) {
    const item = document.createElement('li');
    item.textContent = name;
    list.append(item);
  }
 
  console.log(list.children.length); // 3
</script>

Свойство children хранит дочерние элементы — те, что лежат прямо внутри.

Элемент с классом и атрибутами

Новому элементу сразу задают всё, что нужно: класс, атрибуты, вложенные элементы. Удобно вынести создание в функцию:

<div id="products"></div>
 
<script>
  function createCard(title, price) {
    const card = document.createElement('div');
    card.className = 'card';
    card.dataset.price = price;
 
    const heading = document.createElement('h3');
    heading.textContent = title;
 
    card.append(heading, `Цена: $${price}`);
    return card;
  }
 
  document.querySelector('#products').append(createCard('Ноутбук', 900));
</script>

Удаление

Метод remove() убирает элемент со страницы. Чтобы очистить элемент от всего содержимого, вызовите replaceChildren() без аргументов:

<p>Первый абзац</p>
<p id="extra">Лишний абзац</p>
 
<script>
  document.querySelector('#extra').remove();
 
  console.log(document.querySelectorAll('p').length); // 1
</script>

Частая ошибка

Ожидать, что повторный append() того же элемента создаст копию. Элемент может находиться только в одном месте страницы, поэтому он просто переместится:

<ul id="a"></ul>
<ul id="b"></ul>
 
<script>
  const item = document.createElement('li');
  item.textContent = 'Один';
 
  document.querySelector('#a').append(item);
  document.querySelector('#b').append(item);
 
  console.log(document.querySelectorAll('li').length); // 1
</script>

Если нужно несколько одинаковых элементов, создавайте каждый заново или копируйте методом cloneNode(true).

Спасибо, что читаете!