1

введите сюда описание изображения

Использую innerHTML пытаюсь отобразить в li список из 200 title. Но, при этом отображает только 1. Подскажите в чем причина может быть?

const listLi = document.querySelector('.listli');

const getApi = async() => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos');
  const result = await response.json();
  result.map(el => {
    for (let i = 0; i < result.length; i++) {
      listLi.innerHTML = el.title;
    }
  })
};

getApi();
<ol>
  <li class="listli"></li>
</ol>

2
  • А что по твоему происходит на каждой итерации в этом месте listLi.innerHTML = el.title? И откуда там вообще списку взяться, когда элемент только один? 2 авг 2021 в 18:22
  • 1
    Очевидно, в том, что у вас в html-коде один-единственный элемент li, а новых элементов вы нигде даже не пытаетесь создавать
    – andreymal
    2 авг 2021 в 18:22

2 ответа 2

3

Попробуйте

const todo_el = document.querySelector('#todo');

const getApi = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos');
  const result = await response.json();
  result.map(el => {
    let li_el = document.createElement("li");
    li_el.textContent = el.title;  
    todo_el.appendChild(li_el);
  })
};

getApi();
<body>
   <ol id="todo"/>
</body>

9
  • Спасибо!) Получилось! 2 авг 2021 в 18:34
  • @salco202020, пожалуйста :)
    – gil9red
    2 авг 2021 в 20:22
  • Можете подсказать, зачем создавать текстовую ноду? 2 авг 2021 в 20:37
  • @OliverPatterson, если использовать текстовую ноду, то содержимое из el.title будет воспринято именно как строка, а не как кусок html :)
    – gil9red
    3 авг 2021 в 5:40
  • 1
    @OliverPatterson, спасибо, за вопросы :) Думаю, лучше поменять ответ и вместо createTextNode использовать что-то аналогичное, но проще выглядящее :)
    – gil9red
    3 авг 2021 в 9:55
3
<body>
   <ol class="listli" />
</body>

const list = document.querySelector('.listli');

const getApi = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos');
  const result = await response.json();
  result.forEach(el => {
    const li = document.createElement('li')
    li.innerHTML = el.title;
    list.append(li)     
  })
};

getApi();
1
  • Спасибо!) Получилось! 2 авг 2021 в 18:34

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.