Для решения данной задачи, вам потребуется немного кода на JavaScript. Первым шагом, для достижения цели мы создадим кнопку и список элементов, которые мы хотим вывести. Затем, используя JavaScript, мы свяжем кнопку с функцией, которая будет добавлять или удалять элементы из списка при каждом нажатии кнопки.
Давайте посмотрим на пример:
HTML:
<button id="addButton">Добавить элементы</button> <ul id="listContainer"></ul>
JavaScript:
// Получаем ссылки на кнопку и контейнер списка var addButton = document.getElementById('addButton'); var listContainer = document.getElementById('listContainer'); // Счетчик элементов var count = 1; // Функция для добавления элементов function addItems() { // Создаем новый элемент списка var listItem = document.createElement('li'); listItem.textContent = 'Элемент ' + count; // Добавляем элемент в контейнер списка listContainer.appendChild(listItem); // Увеличиваем счетчик элементов count++; } // Назначаем обработчик события "click" на кнопку addButton.addEventListener('click', addItems);
В данном примере мы используем метод addEventListener
для назначения функции addItems()
в качестве обработчика события "click" на кнопку. Функция addItems()
создает новый элемент списка при каждом нажатии кнопки.
Добавленный элемент содержит текст, который включает номер элемента, это делается с помощью переменной count
, которая увеличивается на 1 при каждом вызове функции.
Новые элементы списка добавляются в контейнер списка с помощью метода appendChild
.
В итоге, каждый раз при нажатии на кнопку "Добавить элементы", будет создан новый элемент списка с соответствующим номером, который будет добавлен в контейнер списка.