Добавление элементов в список

256
11 октября 2017, 09:56

Добрый день! Хочу добавить по клику элемент 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);
    }
}
Answer 1

Нужно вынести создание кнопки в функцию, которую следует вызывать на каждой итерации цикла, чтобы вставлялась всегда новая кнопка. Сейчас же, кнопка прыгает по всем элементам 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>

READ ALSO
Как выгрузить данные из JSON в Гугл Таблицу

Как выгрузить данные из JSON в Гугл Таблицу

Имеется информация в JSON формате получаемая с https://bittrexcom/api/v1

374
Множество Starbox на одной странице

Множество Starbox на одной странице

Всем доброго времениХочу сделать рейтинг звездочками

358
Конвертирование даты в javascript

Конвертирование даты в javascript

Есть дата в формате: Tue, 10 Oct 2017 00:00:00 GMTНужно средставми js конвертировать её в формат Tue, 10 Oct 2017, и в формат 2017-10-10(YYYY-MM-DD), как это можно сделать?

310
Установка polymer для fedora Linux

Установка polymer для fedora Linux

Подскажите подробную установку библиотеки polymer для fedora Linux?

196