Загрузить больше элементов списка, используя forEach

Question

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

.hideclass { 
  position: absolute; 
  overflow: hidden; 
  display: none;

}


<ul></ul>

<div id="loadmore">MORE</div>




const array = ['A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A']


const list = document.querySelector('ul'),
    items  = list.querySelectorAll('li'),
    buttonloadmore =  document.querySelector('#loadmore'),
    maxItems = 10,
    hideclass = "hideclass";


//Generate liste
output = ''
array.forEach(item => {
  output += `<li class="item"> </li>`;          
})

list.innerHTML = output;




[].forEach.call(items, (item, index) => {
    if (index > maxItems - 1) {
        item.classList.add(hideclass);
    }
});



buttonloadmore.addEventListener('click', () => {

  [].forEach.call(document.querySelectorAll('.' + hideclass), (item, index) => {

      if (index < maxItems - 1) {
          item.classList.remove(hideclass);
      }

      if ( document.querySelectorAll('.' + hideclass).length === 0) {
          buttonloadmore.style.display = 'none';
      }

  });

});

Рабочий пример без массива jsfiddle

Есть ли способ работы с динамическими списками?или используйте кнопку, чтобы ограничить цикл forEach?

Answer 1

document.querySelectorAll возвращает массив узлов в документе к тому времени, когда вы его называете . В вашем случае вы запрашиваете <li> s, но поскольку <li> не было добавлено, но вы ничего не нашли, массивоподобный items поэтому пуст. Затем вы добавляете <li> s, но items останется пустым.

Вы должны запросить узлы после их добавления.