fetch - 获取 [object HTMLDivElement] 而不是内容

Question

我正在使用 fetch 将虚假的 NEW POST 发布到站点：https ://jsonplaceholder.typicode.com/posts 我成功将其记录到控制台但是当我尝试在现有 div 中显示 NEW POST 时我只得到 [object HTMLDivElement] 结果的 DOM 我该如何解决这个问题？这是我的代码：

<form id="addPost">
<div>
  <input type="text" id="title" placeholder="Title">
</div>
<div>
  <textarea name="" id="body" placeholder="Body"></textarea>
</div>
<input type="submit" value="Submit (Add Post to API Data)">

function addPost(e){
  e.preventDefault();
  let title = document.querySelector('#title').value;
  let body = document.querySelector('#body').value;
  
  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Accept': 'application/json, text/plain, */*',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({title: title, body: body})
  })
  .then(res => res.json())
  // .then(data => console.log(data));
  .then(data => {
    output = `<div><h2>New Post</h2><p>ID: ${data.id}</p><h3>${data.title}</h3><p>${data.body}</p></div>`;
    console.log(data, "   ", typeof(data));
  });
  document.querySelector('#output').innerHTML = output;  // this gets me [object HTMLDivElement]
}

标签： fetch