Добрый день! Хочу добавить по клику элемент li с данными а к нему кнопку после элемента (есть вторая часть задания, чтобы по клику удалить этот элемент). Что не получается, кнопка добавляется только после (до) последнего элемента, не получается добавить ее ко всем li.
Функция тут: https://github.com/Natanagar/addElement/blob/master/js/app.js
Это кусок функции, которая вставляет именно саму кнопку
//create new Button with delete
let addNewButton = function(event){
let arrayBtn=[];
const newBtn = document.createElement('button');
newBtn.innerHTML = "Delete";
newBtn.classList.add("button");
console.log(newBtn);
//return newBtn;
const collectionList = [...document.querySelectorAll('li')];
console.dir(collectionList);
for(let i = 0; i<collectionList.length; i++){
console.log(collectionList[i]);
collectionList[i].insertAdjacentElement("beforeEnd", newBtn);
}
}
Нужно вынести создание кнопки в функцию, которую следует вызывать на каждой итерации цикла, чтобы вставлялась всегда новая кнопка. Сейчас же, кнопка прыгает по всем элементам li и остается в том, который был на последней итерации.
function createDeleteBtn() {
const newBtn = document.createElement('button');
newBtn.innerHTML = "Delete";
newBtn.classList.add("button");
return newBtn;
}
const collectionList = [...document.querySelectorAll('li')];
for (let i = 0; i < collectionList.length; i++) {
collectionList[i].insertAdjacentElement("beforeEnd", createDeleteBtn());
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости