在javascript中处理fetchapi

我在一个类似twitter的网页上工作。在一个页面中，我有一个表单来写一条推文，并且有足够的空间来显示推文。为了异步显示它们，我使用fetch api截取表单并动态执行此操作：

document.querySelector('form').onsubmit = (event) => {
    event.preventDefault();

  fetch("", {

    method: 'POST',
    body: JSON.stringify({
      body: document.querySelector('#new_message').value
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8",
      "X-CSRFToken": getCookie('csrftoken')
    }
  })
  .then(response => response.json())
  .then(result => {
      document.querySelector('#new_message').value = ""

      let div = document.createElement('div')
      div.innerHTML = ("<p>" + result.creation_date + "</p>"
                      + "<a href='#'>" + result.username + "</a>" + ' said:' +
                      '<br><br>'
                      +"<div class='container'>"
                          + "<p>" + result.body + "</p>" +
                      "</div>");

      div.style.cssText = "box-shadow: 0px 0px 2px; ; background-color:#F5F5F5; border-radius:10px; padding: 10px; margin: 5px;";

      document.querySelector('#posts').append(div);

  });

}

这使我能够处理来自javascript代码的tweet html，并使用html中的django模板。我的代码中有冗余，因为我必须在javascript获取api代码和html中为tweet编写html

此外，我必须使这两个代码看起来相同，因为如果不是这样，当我发布tweet时，表单发布时tweet的样式将与通过get方法获取所有tweet时的样式不同

我该如何改进这一点

下面是我的html文件：

<div id="posts">

</div>

{% if posts %}
  {% for post in posts %}
  <div id="granpost" class="container">
    <div style="box-shadow: 0px 0px 2px; ; background-color:#F5F5F5; border-radius:10px; padding: 10px; margin: 5px;">
      <p>{{post.creation_date}}</p>
    <a href="#">{{ post.user }}</a>  said:
      <br><br>
      <div class="container">
        <p>{{ post.content }}</p>
      </div>
    </div>
  </div>
  {% endfor %}
{% endif %}

{%if posts%}
{posts%%中的post为%s}
{{post.creation_date}

说：



{{post.content}}

{%endfor%}
{%endif%}

<div id="posts">

</div>

{% if posts %}
  {% for post in posts %}
  <div id="granpost" class="container">
    <div style="box-shadow: 0px 0px 2px; ; background-color:#F5F5F5; border-radius:10px; padding: 10px; margin: 5px;">
      <p>{{post.creation_date}}</p>
    <a href="#">{{ post.user }}</a>  said:
      <br><br>
      <div class="container">
        <p>{{ post.content }}</p>
      </div>
    </div>
  </div>
  {% endfor %}
{% endif %}