Добавляем и удаляем строки в div с помощью JavaScript

Быстрый ответ

// Для добавления содержимого используйте операцию присваивания с добавлением:
document.querySelector('#yourDiv').innerHTML += '<p>Добавляем этот текст</p>';

// Для очистки содержимого применяйте простое присваивание пустой строки:
document.querySelector('#yourDiv').innerHTML = '';

С помощью innerHTML += добавляйте контент в div, а через innerHTML = '' очищайте весь содержимый элемента.

Оптимизация работы с DOM для повышения производительности

Эффективное добавление элементов

Производительное добавление новых элементов в DOM возможно с помощью методов createElement и appendChild:

// createElement – как создание небольшого чуда:
let newElement = document.createElement('div');

// appendChild – как радушное принятие в семью элементов:
container.appendChild(newElement);

Подробнее об этом расскажет наш спикер на видео

Удаление элементов без лишних побочных эффектов

Для удаления элемента применяйте метод remove его родительского узла:

// Бережное отношение к элементам:
elementToRemove.parentNode.remove(elementToRemove);

Тщательная очистка

И помимо самого элемента удаляйте и обработчики событий, связанные с ним:

// С благодарностью отпускаем:
elementToRemove.removeEventListener('click', yourEventHandler);

// И безо всяких угрызений удаляем:
elementToRemove.remove();

Делегирование событий и управление динамическими элементами

Уделите внимание делегированию событий

Делегирование событий позволяет оптимизировать управление событиями в div, экономя ресурсы:

// Родители всегда правы:
document.getElementById('yourDiv').addEventListener('click', function(event) {
  if (event.target.classList.contains('remove-btn')) {
    // 'Прощайте безвозвратно...' – волшебное действие JavaScript
    event.target.closest('.row').remove();
  }
});

Польза от использования идентификаторов

Присвоение идентификаторов элементам способствует их управлению и настройке визуальных стилей:

// Каждый элемент − безупречный раритет...
newElement.className = 'dynamic-content';
newElement.id = `content-${uniqueId}`;

Используйте уникальные идентификаторы, чтобы не запутаться в DOM.

Визуализация

Вот так это выглядит на практике:

До:
[📚,🖼️,🌱]

Добавляем новый элемент на полку:

document.getElementById('your-shelf').innerHTML += '<div>🎮</div>';

После:
[📚,🖼️,🌱,🎮]

Удаляем элемент, и вот его уже нет:

document.getElementById('game').remove();

И вот они, трое последних:
[📚,🖼️,🌱]

Умело перестраивайте оформление, не создавая его заново!

Продвинутые методы и важные нюансы

Вставка HTML в строго определенное место с помощью метода insertAdjacentHTML

Используйте insertAdjacentHTML для точной расстановки контента:

// Место во всём важно!
document.getElementById('yourDiv').insertAdjacentHTML('beforeend', '<div>И ещё немного текста</div>');

Соблюдение единого визуального оформления

Применяйте одинаковые классы для динамически добавляемых элементов, чтобы поддерживать согласованный стиль:

// Одевайтесь, как если бы весь DOM был вашей сценой!
newElement.classList.add('consistent-style');

Полезные функции для работы с элементами

Сделайте свой код проще, описав логику в функциях:

// Мастер по встрече новых элементов!
function addRow() { /* Ваш код для новой строки здесь */ }

// Искушенный в делах прощания!
function removeRow(rowId) { /* Ваш код удаления строки здесь */ }

Предупреждение утечек памяти при очистке обработчиков событий

Освобождайте обработчики событий для элементов, которые уже удалены, чтобы избежать утечек памяти:

// 'Тебе здесь не рады, уходи!'
document.querySelectorAll('.dynamic-content').forEach(elem => {
  elem.removeEventListener('click', yourEventHandler);
});

Полезные материалы

1. JavaScript HTML DOM — Отличное пособие по взаимодействию с HTML DOM в JavaScript.
2. Введение в DOM – Web API | MDN – Всё, что стоит знать о Документной Объектной Модели.
3. Свойство Element: innerHTML – Web API | MDN — Подробная информация о манипуляциях с HTML через свойство innerHTML.
4. Метод Node: appendChild() – Web API | MDN — Учебник о добавлении дочерних узлов к элементу.
5. Метод Element: insertAdjacentHTML() – Web API | MDN — Детальное освещение темы вставки HTML относительно узлов элементов.
6. Метод Node: removeChild() – Web API | MDN — Справочник по удалению элементов из DOM.
7. Можно ли добавить HTML в innerHTML без уничтожения событий вложенных элементов? – Stack Overflow — Обсуждение вопроса о внесении изменений в innerHTML без запутывания обработчиков событий.