时间戳

首页 > 解决方案 > 使用 fetched API 创建多个元素

javascript - 使用 fetched API 创建多个元素

问题描述

JS新手来了！我正在尝试使用 Fetch 使用来自 jsonplaceholder 的假 ToDos 制作待办事项列表。我想获取五个不同的 ToDo 并将它们放入我列表中的不同列表项中。但不知何故，五个待办事项中只有一个出现了。

HTML：

<ul id="result">

</ul>

JS：

fetch("https://jsonplaceholder.typicode.com/todos/1") 
.then(function(response) {
    return response.json()
})
.then((response) => {
    console.log(response)
    var result = document.getElementById('result')
    result.innerHTML = '<li>' +  response.title '</li>'
})

fetch("https://jsonplaceholder.typicode.com/todos/2") 
.then(function(response) {
    return response.json()
})
.then((response) => {
    console.log(response)
    var result = document.getElementById('result')
    result.innerHTML = '<li>' +  response.title '</li>'
})

fetch("https://jsonplaceholder.typicode.com/todos/3") 
.then(function(response) {
    return response.json()
})
.then((response) => {
    console.log(response)
    var result = document.getElementById('result')
    result.innerHTML = '<li>' +  response.title '</li>'
})

fetch("https://jsonplaceholder.typicode.com/todos/4") 
.then(function(response) {
    return response.json()
})
.then((response) => {
    console.log(response)
    var result = document.getElementById('result')
    result.innerHTML = '<li>' +  response.title '</li>'
})

fetch("https://jsonplaceholder.typicode.com/todos/5") 
.then(function(response) {
    return response.json()
})
.then((response) => {
    console.log(response)
    var result = document.getElementById('result')
    result.innerHTML = '<li>' +  response.title '</li>'
})

标签： javascripthtmljsonplaceholder

解决方案

设置innerHTML替换目标元素的内容，而不是添加到它。您应该使用 operator+=或 method insertAdjacentHTML，或者最好append使用带有构造元素的方法。后者将避免包含 html 特殊字符的文本出现问题，并且更易于维护。

fetch 部分似乎没问题，除非您无法保证 fetch 调用将返回的顺序（它们是异步的）。

以下是解决问题的方法：

function appendTodo(value) {
  const li = document.createElement('li');
  li.innerText = value;
  document.querySelector('#result').append(li);
}

appendTodo('Todo 1');
appendTodo('That remains to do');
appendTodo('This one also');
appendTodo('It has a <tag>');
appendTodo('Hey !');
<ul id="result">

</ul>

推荐阅读