使用fetch()发起AJAX请求后，如何向HTML列表中添加p标签？

我是新手，不怕钻研问题，也十分感激现有的知识资源，但我已经尝试许久却始终未能成功。

目前我能实现循环为每个JSON对象生成带有user.title的p标签，但这就是我的极限了——我试过多种变体成功创建新列表，却无法完成目标。我总觉得自己离正确方法很近，比如类似这样的代码：

Array.from(document.querySelectorAll('p'))
  .forEach(p => {
  p.innerHTML = p.innerHTML
    .replace();
})

但我不确定是否走对了方向。我知道replace()方法不合适，replaceWith()是jQuery方法，不知道是否该在show函数中执行这段代码？我总想起教程里的类似操作，感觉答案近在眼前却难以触及。我不是要他人代劳，那样我学不到东西，哪怕一点提示也能激励我继续钻研。

现有代码 #

JavaScript #

// 1. GET request using fetch()
fetch("https://jsonplaceholder.typicode.com/todos")
  // Convert received data to JSON
  .then(response => response.json())
  .then(users => show(users));

function show(users) {
  const para = document.querySelector("p");
  for (let user of users) {
    let html = `<p>${user.title}</p>`;
      para.insertAdjacentHTML("afterend", html);
  }
};

HTML #

<ul> <!-- loop start -->
    <li>
      <img src="https://picsum.photos/200" />
      <p></p> <!-- append to <p>${users.title}</p> for each obj -->
    </li>
  </ul> <!-- loop end -->

提示 #

• 你的目标是给每个<li>里的<p>填充内容，而非生成新的<p>标签，所以先停止用insertAdjacentHTML创建新元素
• document.querySelector只会返回第一个匹配的元素，要获取所有目标<p>，得用document.querySelectorAll
• 在show函数里，你可以同步遍历users数组和目标<p>元素集合，直接给对应<p>的innerHTML赋值
• 提前考虑下users数量和<li>数量不匹配的情况，避免出现赋值错误

内容的提问来源于stack exchange，提问作者BillieM