Почему каждый добавленный html становится все меньше и меньше с inserttadjacentHTML? - PullRequest
Новая
       51

Почему каждый добавленный html становится все меньше и меньше с inserttadjacentHTML?

0 голосов
/ 17 октября 2019

Вот ссылка на мою скрипку JS: https://jsfiddle.net/apasric4/u4y6t9jw/2/

Вот мой JS;

const url='https://randomuser.me/api/?results=10';
const button=document.querySelector('button');
const output=document.querySelector('.output');



async function search(url) {
  const response=await fetch(url);
  const myJSON= await response.json();
  const {results}=myJSON;
  const html=results.map(person=> 
    `<div class="box">
      <img src=${person.picture.medium}>
      <span>${person.name.first}</span>
    <div>
    `
  );
  return html;
}


button.addEventListener('click', ()=> {
  search(url).then(html=> output.insertAdjacentHTML('afterbegin', html));
});

Если вы нажмете кнопку поиска, вы увидите, что каждый добавленный элемент HTML становится все меньше и меньше. Разве они не должны быть одинакового размера в выходном div?

...