Я пытаюсь создать бота, и я хотел бы, чтобы все мои сообщения содержались в том же самом div в JS

Question

Итак, я создаю чат-бота, и сейчас мой текст появляется, когда я его набираю, но не все появляются в одном и том же div. После отправки первого сообщения остальные отображаются под формой ввода.

Я попытался применить тот же элемент, который использовал для верхней кнопки, но он все еще не работал. потому что это заставляло исходное сообщение исчезать. Я хотел бы, чтобы все сообщения оставались настоящими.

var btnClick = function(text) {
  counter++;
    if (counter == 1) {
        document.getElementById("upDateText").innerText
        let newElement = document.createElement("h1");
        newElement =  = "I am " + text + "!";
        newElement.style.textAlign = "right";
        newElement.innerText = "Hi " + text + "!";
        document.body.appendChild(newElement);
        createHobbies();
      } else if (counter == 2) {
        let newElement = document.createElement("h1");
        let hobbies = 'your hobies here';
        newElement.innerText =
          "that is so cool that you like" + hobbies + " can we be friends"; // your "hobies" is not defined!
        document.body.appendChild(newElement);
      } 

  if (form.inputbox.value === "") {
    let newElement = document.createElement("h1");
    newElement.style.color = "red";
    newElement.innerText = "sorry bout that";
    document.body.appendChild(newElement);
  }
};

Answer 1

просто измените метод с body на getElementById("upDateText")

var btnClick = function(text) {
  counter++;

  if (counter == 1) {
    document.getElementById("upDateText").innerText = "I am " + text + "!";
    let newElement = document.createElement("h1");
    newElement.style.textAlign = "right";
    newElement.innerText = "Hi " + text + "!";

    document.getElementById("upDateText").appendChild(newElement);
    createHobbies();
  } else if (counter == 2) {
    let newElement = document.createElement("h1");
    let hobbies = 'your hobies here';
    newElement.innerText =
      "that is so cool that you like" + hobbies + " can we be friends"; // your "hobies" is not defined!
    document.getElementById("upDateText").appendChild(newElement);
  } 

  else if (form.inputbox.value === "") {
    let newElement = document.createElement("h1");
    newElement.style.color = "red";
    newElement.innerText = "sorry bout that";
    document.getElementById("upDateText").appendChild(newElement);
  }
};