Javascript 在用户输入的屏幕上分隔文本

我有一个HTML页面，其中有一个

元素。也就是说，我有一个发送按钮，在屏幕上显示消息。发送多条消息时，它们的位置将移动到上一条消息的下方。新消息将在单独的容器中（我制作了边框）。我用过这个代码，它很有效。实际上，它并没有完全起作用。当您输入多条消息时，它会将所有文本放在同一元素中，而不是创建包含消息的新消息边框

const-button=document.getElementById（“sendButton”）；
按钮。addEventListener（“单击”，显示文本）；
函数displayText（）{
const display=document.getElementById（“msg”）；
const textArea=document.getElementById（“enterMsg”）；
display.append(
textArea.value，
document.createElement（“br”）
);
textArea.value=“”；
}

正文{
背景色：天蓝色；
字体大小：粗体；
}
#enterMsg{
利润率最高：34%；
高度：130像素；
宽度：100%；
字体系列：Arial，无衬线；
字体大小：15px；
颜色：暗红色；
背景色：#d796ff；
字体大小：粗体；
}
.enterText{
字体系列：Arial，无衬线；
字体大小：15px；
颜色：暗红色；
背景色：#d796ff；
字体大小：粗体；
}
#发送按钮{
左缘：96%；
}
#味精{
左缘：80%；
边框：实心；
边框颜色：#b19cd9；
背景色：#b4ff94；
边界半径：50px；
颜色：暗红色；
}
.外部空间{
填充物：5px；
}
文本区域：：占位符{
颜色：暗红色；
}
分区中心{
文本对齐：居中；
边框：实心；
边框颜色：蓝色；
利润率最高：10%；
利润底部：10%；
}
.confirmButton{
文本对齐：居中；
边缘底部：5px；
}

主页

发送

主页
发送

const-button=document.getElementById（“sendButton”）；
按钮。addEventListener（“单击”，显示文本）；
const textArea=document.getElementById（“enterMsg”）；
const container=document.getElementById（“消息”）；
函数displayText（）{
//创建一个新元素，将消息作为其内部文本。
const message=document.createElement（“p”）；
message.innerText=textArea.value；
message.setAttribute（“类”、“消息”）；
//将其添加到文档中
container.appendChild（消息）；
textArea.value=“”；
}

您还必须更改样式表，因为

msg

现在是一个类而不是一个ID（因为将有多个

主页
发送

const-button=document.getElementById（“sendButton”）；
按钮。addEventListener（“单击”，显示文本）；
const textArea=document.getElementById（“enterMsg”）；
const container=document.getElementById（“消息”）；
函数displayText（）{
//创建一个新元素，将消息作为其内部文本。
const message=document.createElement（“p”）；
message.innerText=textArea.value；
message.setAttribute（“类”、“消息”）；
//将其添加到文档中
container.appendChild（消息）；
textArea.value=“”；
}

您还必须更改样式表，因为

msg

现在是一个类而不是一个ID（由于将有多个

我已将样式表中的#msg更改为.msg，但现在每当我尝试输入消息时，文本都不会显示在屏幕上，

不清晰。这有什么原因吗？我已将样式表中的#msg更改为.msg，但现在每当我尝试输入消息时，文本都不会显示。）在屏幕上，

无法清除。有什么原因吗？