Добавление нового элемента в список по клику: JS

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

Если вам нужно вставить новый элемент <li> в список <ul> с помощью JavaScript, то можно воспользоваться методами createElement и appendChild. Они нуждаются в совместном использовании с обработчиком события addEventListener, который должен быть привязан к кнопке:

document.querySelector('#clickMe').addEventListener('click', () => {
  const newListItem = document.createElement('li');
  newListItem.textContent = 'Поймай меня, если сможешь!';
  document.querySelector('#ulList').appendChild(newListItem);
});

Обязательно введите ID для вашего списка <ul> и кнопки. Что отлично в этом коде? Он создаёт элемент <li>, заполняет его текстом и аккуратно вклеивает в <ul>!

Заметки по улучшению функции

При создании надёжной функции добавления <li> необходимо внимательно продумать несколько аспектов.

Прверка синтаксиса

Синтаксические ошибки или неверные ID могут привести к присвоению значений null. Это сродни поиску темно-серой кошки в темной комнате. Просто, но критически важно для бесперебойной работы кода.

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

Присвоение ID новому <li>

Присвоение идентификатора новому элементу <li> можно выполнить через свойство id или скрипт setAttribute. Это подобно выбору имени для новорожденного ребёнка:

// Вот это да, наша семья выросла 🍼
newListItem.id = `li-${document.querySelectorAll('#ulList li').length}`;

Выбор между TextContent и innerHTML

Применение textContent поможет избежать XSS-атак. Но если вам необходимо вставлять HTML-теги, то используйте innerHTML, но обязательно с учетом безопасности.

newListItem.textContent = 'Поймали?'; // Вы в безопасности 😇
newListItem.innerHTML = '<span>Ой, и вправду поймали!</span>'; // Используйте с умом 😎

Современные обработчики событий

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

document.querySelector('#clickMe').addEventListener('click', addListItem);

Нумерация новых элементов

Предоставьте каждому создаваемому <li> уникальный порядковый номер, основываясь на уже существующих элементах в <ul>. Заслужило уважение Cay S. Law:

li.textContent = `Элемент ${ul.children.length + 1}`; // Cay S. Law был здесь

Работа со сложным содержимым

Создание элементов <li> со сложным содержимым требует последовательного подхода. Желательно создавать и наполнять вспомогательные элементы отдельно:

const spanElement = document.createElement('span');
spanElement.textContent = 'Подэлемент';
newListItem.appendChild(spanElement); // Семейный подход

Регулярная диагностика кода

Не забывайте на регулярной основе использовать console.log или проверку DOM, чтобы убедиться, что <li> корректно добавлены в <ul>. Возможно, откройтесь для креативности в диагностировании кода?

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

Представьте строительную площадку, где каждый кирпич — это элемент <li>:

Структура: [🧱🧱]

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

function newBlock() {
  let structure = document.getElementById('building');
  let block = document.createElement('li');
  // Когда у вас идеальна физическая форма 🏋️‍♀️
  block.appendChild(document.createTextNode('🧱'));
  structure.appendChild(block);
}

Стройте ваш список, как вы строите здание, кирпич за кирпичом!

До: [🧱🧱]
После клика: [🧱🧱🧱]

Продвинутые техники

После того, как вы освоились с основами, перед вами появляются улучшенные техники. Обратите внимание на детали:

Динамическое содержимое

Сделайте содержимое элементов более разнообразным с помощью объединения строк и функций для загрузки данных:

li.textContent = `И вот оно, динамический контент: ${fetchDynamicContent()}`; // Свежесть, словно утренний булочник

Сохранение данных между кликами

Вы можете использовать замыкания для сохранения состояния между вызовами функций, как кофейная кружка сохраняет ваше настроение для JavaScript!

Производительность: Скорость имеет значение

Приложите виртуальный DOM или пагинацию для больших списков. Скорость имеет значение, хотя она не всегда гарантирует успех!

Доступность: Все важны

Не забывайте присваивать создаваемым элементам атрибуты role и aria-, чтобы упростить работу скрин-ридеров. Каждый пользователь должен иметь возможность насладиться использованием вашего интерактивного элемента:

li.setAttribute('role', 'listitem'); // Показываем, что каждый элемент важен

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

1. Узлы DOM в JavaScript на W3Schools – Упражняйте управление узлами DOM.
2. Метод Document: createElement() – Веб-API | MDN – Инструкция по методу createElement().
3. Метод Document: querySelector() – Веб-API | MDN – Научитесь отслеживать неуловимые элементы DOM с помощью querySelector().
4. Метод EventTarget: addEventListener() – Веб-API | MDN – Руководство по addEventListener(), который будет внимателен к каждой вашей команде.
5. html – как добавить новый <li> в <ul> при клике с помощью javascript – Stack Overflow – Обменивайтесь мнениями и решениями по добавлению элементов с другими разработчиками.
6. Изменение документа – JavaScript.info – Станьте мастером в манипуляции документами с помощью JavaScript.
7. Простой JavaScript – Манипулирование DOM элементами – Сосредоточьтесь на чистом JavaScript для управления DOM.