Добавление нескольких элементов в DOM за одно обращение

Question

Всем привет! У меня есть задание по работе с общедоступным API GitHub Итоговое решение должно состоять из двух элементов, расположенных на странице - поля ввода с автодополнением (автокомплита) и списка репозиториев

Проблема с добавлением элементов в DOM
Происходит 5 вызовов функции createChoice и в каждом вызове обращение к DOM и добавление элемента на страницу, а нужно сделать так,чтобы все пять элементов собрались сначала вместе, а потом за одно обращение к DOM добавились на страницу.

вот мой код:

const createChoice = function(el) {
  const choice = document.createElement('div');
  choice.classList.add('choice');
  choice.textContent = `${el.name}`;
  autodop.append(choice);
  choice.addEventListener('click', () => addCard(el));
};


const getRep = async(requst) => {
  return await fetch(`https://api.github.com/search/repositories?q=${requst}&per_page=5`)
  .then((res) => {
    if(res.ok) {
      res.json()
      .then(res => {
        res.items.forEach(item => createChoice(item))
      })
    }
    autodop.innerHTML = ''
  })
};

Насколько я поняла нужно отделить autodop.append от цикла, чтобы эта команда выполнилась один раз, подскажите пожалуйста варианты, а то никак не выходит?

Answer 1

Что бы вставить элементы за 1 раз, надо их собрать в массив и один раз передать в метод .append() через спред оператор:

 const createChoice = function (el) {
    const choice = document.createElement('div');
    choice.classList.add('choice');
    choice.textContent = `${el.name}`;
    choice.addEventListener('click', () => addCard(el));
    // Возвращаем созданный элемент
    return choice; 
  };

  const getRep = async (requst) => {
    return await fetch(`https://api.github.com/search/repositories?q=${requst}&per_page=5`)
      .then((res) => {
        autodop.innerHTML = '';
        if (res.ok) {
          res.json()
            .then(res => {
              // Формируем массив элементов
              const divs = res.items.map(item => createChoice(item));
              // Добавляем на страницу
              autodop.append(...divs);
            })
        }
      })
  };

БЛОГ НА HUSL

Добавление нескольких элементов в DOM за одно обращение

Ответы (1 шт):