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