I can easily update the html when it's not part of the form's submit or button. Or even when it's just a pure button element (rather than an input from a form). However, when I try to append a string to the

class "chatGoesHere", nothing happens. The consolealso quickly reloads since the form is going to \send.

I'm happy to post my views.py and urls.py, however, I'm pretty sure the issue is inside of my html document below:

<p class="chatGoesHere" id="chatGoesHere"> 1st Item! </p> 

<form action="\send\" method="post">
    <input type="text" name="userMessage" />
    <input type="submit" value="Send to smallest_steps bot" class="sendButt" id="sendButt" />
  </form>
  
  <script>
      var btn = document.getElementById("sendButt");
      btn.addEventListener("click", updateChat);
  
      function createMenuItem(name) {
          let li = document.createElement('p');
          li.textContent = name;
          return li;
      }
      const td = document.getElementById('chatGoesHere');
      td.appendChild(createMenuItem("TEST2"))
  
      function updateChat(){
          const td = document.getElementById('chatGoesHere');
          td.appendChild(createMenuItem("TEST3"))
      }
  </script>

I'd like it so that every time a user pushes the submit button of the form something gets added to the page without the page reloading.

Thank you