Javascript 使用获取的API创建多个元素

这里是JS新手！我正在尝试使用Fetch从jsonplaceholder创建一个包含假todo的todo列表。我想提取五个不同的待办事项，并将它们放入我的列表中的不同列表项中。但不知怎么的，五个待办事项中只有一个出现了

HTML:

JS:

fetch（“https://jsonplaceholder.typicode.com/todos/1") 
.然后（功能（响应）{
返回response.json（）
})
。然后（（响应）=>{
console.log（响应）
var result=document.getElementById（'result'）
result.innerHTML='
'+response.title'
'
})
取回（“https://jsonplaceholder.typicode.com/todos/2") 
.然后（功能（响应）{
返回response.json（）
})
。然后（（响应）=>{
console.log（响应）
var result=document.getElementById（'result'）
result.innerHTML='
'+response.title'
'
})
取回（“https://jsonplaceholder.typicode.com/todos/3") 
.然后（功能（响应）{
返回response.json（）
})
。然后（（响应）=>{
console.log（响应）
var result=document.getElementById（'result'）
result.innerHTML='
'+response.title'
'
})
取回（“https://jsonplaceholder.typicode.com/todos/4") 
.然后（功能（响应）{
返回response.json（）
})
。然后（（响应）=>{
console.log（响应）
var result=document.getElementById（'result'）
result.innerHTML='
'+response.title'
'
})
取回（“https://jsonplaceholder.typicode.com/todos/5") 
.然后（功能（响应）{
返回response.json（）
})
。然后（（响应）=>{
console.log（响应）
var result=document.getElementById（'result'）
result.innerHTML='
'+response.title'
'
})

设置

innerHTML

替换目标元素的内容，而不是添加到其中。您应该使用运算符

+=

，或者方法

insertAdjacentHTML

，或者最好使用方法

append

和构造的元素。后者将避免包含html特殊字符的文本出现问题，并且更易于维护

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

以下是解决问题的方法：

函数appendTodo（值）{
const li=document.createElement（'li'）；
li.innerText=值；
document.querySelector（“#result”）.append（li）；
}
追加待办事项（“待办事项1”）；
appendTodo（“还有待完成的事情”）；
appendTodo（‘这一个也’）；
appendTodo（'它有一个'）；
“嘿！”

您所做的是在每次发出fetch（）请求并更新其内部HTML时声明新变量。

这就是为什么您只获取最近获取的最后一个。


使用声明全局变量：

var el=document.querySelector（'result'）

然后使用此append语法更新元素，使新数据显示在以前的数据之后：
el.innerHTML+=”
“+response.title+”
“
在代码中，您将用响应文本替换il内部Html

您必须将元素附加到列表中，而不是将其替换为新元素

您可以这样做：

fetch("https://jsonplaceholder.typicode.com/todos/") 
.then(function(response) {
    return response.json()
})
.then((response) => {
    console.log(response[3]);
     var result = document.getElementById('result');

      for (var i=0;i<=5;i++){
         var li = document.createElement("li");
         li.appendChild(document.createTextNode(response[i].title));
         result.appendChild(li)
      }
})

fetch（“https://jsonplaceholder.typicode.com/todos/") 
.然后（功能（响应）{
返回response.json（）
})
。然后（（响应）=>{
console.log（响应[3]）；
var result=document.getElementById（'result'）；
对于（var i=0；i，如果您希望在创建函数时获取一个TODO，那么创建函数是一个好主意（您有很多重复代码）


const fetchTodo=id=>{
取回（“https://jsonplaceholder.typicode.com/todos/“+id）
.然后（功能（响应）{
返回response.json（）；
})
。然后（（响应）=>{
var result=document.getElementById（'result'）；
result.innerHTML+='
'+response.title+'
'；
});
};
todo（1）；
fetchTodo（2）；


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>'
})

fetch("https://jsonplaceholder.typicode.com/todos/") 
.then(function(response) {
    return response.json()
})
.then((response) => {
    console.log(response[3]);
     var result = document.getElementById('result');

      for (var i=0;i<=5;i++){
         var li = document.createElement("li");
         li.appendChild(document.createTextNode(response[i].title));
         result.appendChild(li)
      }
})