使用提取的API创建多个元素

Question

JS新人来了！我正在尝试使用Fetch从jsonplaceholder创建一个带有假todo的todo列表。我想要取五个不同的ToDos并将它们放入我的列表中的不同列表项中。但不知怎的，五个托多人中只有一个出现了。

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

Answer 1

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

fetch部分似乎还可以，但您无法保证fetch调用返回的顺序（它们是异步的）。

以下是解决问题的方法：

null

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>