コメント機能を非同期通信で実装したい

Question

コメントを投稿するとページリロードなしで投稿したコメントが一番上に表示されるようにしたいです。

コメントはサーバー側からpostedCommentsとしてViewに渡し、#eachを使って上から順に表示させています。（Viewエンジンはhbsを使っています。）

pタグを入力欄の下に用意した上でDOM操作により投稿コメントを一番上に挿入する方法を考えたのですが、複数のコメントが投稿された場合、一番上のコメントが上書きされるだけになってしまいます。

何か良い方法はないでしょうか？

<input type="text" name="content" id="comment-input">
<button id="comment-submit">送信</button>
  <div id="comment-box">
    {{#each postedComments}}
    　<p>{{this.content}}: {{this.createdBy.username}}</p>
    　<hr>
    {{/each}}
  </div>

const commentInput = document.getElementById('comment-input');
const commentSubmit = document.getElementById('comment-submit');
const commentBox = document.getElementById('comment-box');

commentSubmit.onclick = () => {
  fetch('/comment/create', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ content: commentInput.value }),
  }).then((response) => response.json())
    .then((postedComment) => {
      console.log(postedComment)
};

###追記
最終的に以下のように実装することができました。

const commentInput = document.getElementById('comment-input');
const commentSubmit = document.getElementById('comment-submit');
const commentBox = document.getElementById('comment-box');

const currentUrl = window.location.href;
const questionId = currentUrl.split('http://localhost:3000/question/')[1].split('/result')[0];

fetch(`/question/${questionId}/result/json`).then((response) => {
  response.json().then((result) => {
    const { postedComments } = result;
    postedComments.forEach((comment) => {
      const p = document.createElement('p');
      p.innerHTML = comment.content;
      commentBox.appendChild(p);
    });
  });
});

commentSubmit.onclick = () => {
  fetch('/comment/create', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ content: commentInput.value, questionId }),
  }).then((response) => {
    response.json().then((result) => {
      const { populatedComment } = result;
      const p = document.createElement('p');
      p.innerHTML = populatedComment.content;
      commentBox.prepend(p);
    });
  });
};

Answer 1

そもそもDOM処理されていないので上書きも挿入もされませんが、
かりに挿入処理を書いているとして、送ったデータを送り返してもらっただけでは
サーバー側に保持されないので上書きされるのが普通では？

Comments

[yambejp]

DBで管理して前回日時より後のデータを全部とりに行くような仕組みが必要だと思います

[maskmelon]

回答くださりありがとうございます。確かにご指摘の通りでした。
後続のfetchでサーバーから全てのコメントを取ってきたのですが（コードを追記しました）、DOM操作でコメントを挿入するところで躓いています。
forEachで回して各コメントを中身とする子要素を作成してdivに追加していくという方法を取ったのですがうまく行きません。何が原因でしょうか？

[maskmelon]

解決しました。ありがとうございました。