Javascript 如何在聊天应用程序中显示一条低于另一条的消息？

我正在尝试用HTML和JavaScript构建一个聊天应用程序。但我无法使消息显示在彼此下方。以下是我的HTML代码：

<div>
  <!-- Message input -->
  <textarea id="messageInput" placeholder="Type a message"></textarea>
  <span onclick="sendIt()" id="sendBtn" class="fa fa-send-o"></span>
</div>
  <!-- Messages will be displayed here -->
<div id="container">
  <p id="nextMessage"></p>  
</div>

以下是js：

var message = document.getElementById('messageInput');

function sendIt() {
  if (message.value == 0) {
    return false;
  } else {
    document.getElementById("nextMessage").innerHTML += message.value + "<br>"
    document.getElementById("nextMessage").style.display = "block"

    message.value = "";

    document.getElementById("messageInput").style.height = "40px"
  }
}

var message=document.getElementById（'messageInput'）；
函数sendIt（）{
如果（message.value==0）{
返回false；
}否则{
document.getElementById（“nextMessage”）.innerHTML+=message.value+“
”
document.getElementById（“nextMessage”）.style.display=“block”
message.value=“”；
document.getElementById（“messageInput”）.style.height=“40px”
}
}

问题是它们在显示时彼此之间没有留出空间。

---

我还尝试使用

textContent

代替innerHTML，但是我无法进行标记。请有人帮助我，并提前表示感谢。

您的代码工作正常。但如果要更改外观，可以将消息放入标记中，然后给出样式：

这是给出保证金的一个例子：

 document.getElementById("nextMessage").innerHTML += '<p style="margin-top: 20px">'+message.value + "</p>"

document.getElementById（“nextMessage”）.innerHTML+='
'+message.value+”
“

您能提供更多说明吗？它是如何显示的，您能否附加当前行为的屏幕截图，并进一步解释所需的行为是什么？请格式化您的代码段。您的代码运行良好。尝试将

span

替换为

按钮

并检查。更优雅的方法可能是使用更合适的HTML元素：而不是使用有序列表（这就是聊天中的一组消息）。然后使用appendChild（）向列表中添加新的列表项：是的，这是正确的 tag只是一个例子，说明这是可以做到的。只需输入方向：rtl for tag非常感谢php开发人员。现在它工作正常：）