如何使用JavaScript在聊天中创建我的元素

我正在开发一个聊天，我需要使用JavaScript创建元素，但是我对JavaScript没有太多的知识，所以每次我尝试时，都会出错，我相信这也是因为CSS类，这让我更难，我希望有人能帮助我

正文{
背景色：黑色；
}
.聊天{
宽度：计算（100%-20px）；
高度：500px；
/*边框：实心1px粉红色*/
显示器：flex；
弯曲方向：立柱；
填充：10px；
边距：0自动0自动；
溢出：自动；
}
.留言{
边缘顶部：30px；
显示器：flex；
弯曲方向：立柱；
}
.留言{
边界半径：20px；
填充：4px15px；
页边顶部：1px；
边缘底部：1px；
显示：内联块；
}
.你的{
调整项目：灵活启动；
}
.你的.留言{
右边距：25%；
背景颜色：紫色；
位置：相对位置；
}
.你的.留言.最后：在{
内容：“；
位置：绝对位置；
z指数：0；
底部：0；
左：-7px；
高度：20px；
宽度：20px；
背景：紫色；
边框右下半径：15px；
}
.你的.留言.最后：之后{
内容：“；
位置：绝对位置；
z指数：1；
底部：0；
左：-10px；
宽度：10px；
高度：20px；
背景：黑色；
边框右下半径：10px；
}
.我的{
对齐项目：柔性端；
}
.我的.留言{
颜色：白色；
左边缘：25%；
背景：线性梯度（至底部，#00D0EA 0%，#0085D1 100%）；
背景附件：固定；
位置：相对位置；
}
.我的.留言.上次：在{
内容：“；
位置：绝对位置；
z指数：0；
底部：0；
右：-8px；
高度：20px；
宽度：20px；
背景：线性梯度（至底部，#00D0EA 0%，#0085D1 100%）；
背景附件：固定；
边框左下半径：15px；
}
.我的.留言.最后：之后{
内容：“；
位置：绝对位置；
z指数：1；
底部：0；
右：-10px；
宽度：10px；
高度：20px；
背景：黑色；
边框左下半径：10px；
}
.你的.用户{
字号：0.6em；
颜色：灰色；
保证金：0px 0px 0px 10px；
}
.我的.用户{
字号：0.6em；
颜色：灰色；
保证金：0px 10px 0px 0px；
}

我
伙计
做记号
嘿
你在吗？
你好，最近怎么样？
非常感谢！
你呢？
安妮
你好
你好吗？
见到你很高兴？
非常感谢！
你呢？

您可以通过按用户对邮件文本进行装箱，然后呈现每个箱子来呈现邮件文本

每次更新基础记录时，只需重新呈现消息

编辑：我更改了：

if（currBin.type==binType（消息））

为此：

if（currBin.from===message.from）

因为我试图缓存用户，所以当他们进入聊天室（跟随前一个用户）时，我只显示一个新用户，如OP的HTML所示。当接收用户的bin最初发送一系列消息时，您可以有一个只显示“我”的标志

演示

const消息=[
{“from”：“Me”，“content”：“Dude”}，
{“from”：“Mark”，“content”：“Hey！”}，
{“from”：“Mark”，“content”：“youthere？”}，
{“from”：“Mark”，“content”：“你好，最近怎么样？”}，
{“发件人”：“我”，“内容”：“非常感谢！”}，
{“from”：“Me”，“content”：“你呢？”}，
{“发件人”：“安妮”，“内容”：“你好！”}，
{“from”：“Anne”，“content”：“你好吗？”}，
{“发件人”：“安妮”，“内容”：“很高兴见到你？”}，
{“发件人”：“我”，“内容”：“非常感谢！”}，
{“来自”：“我”，“内容”：“你呢？”}
];
const renderMessages=（消息）=>{
const binType=（message）=>message.from=='Me'？'mine'：'yours'；
const binMessages=（messages）=>{
const createBin=（消息）=>{
返回{
“类型”：binType（消息），
“发件人”：message.from，
“消息”：[消息]
};
};
返回消息。减少（（垃圾箱，消息）=>{
if（bin.length==0）{
bin.push（createBin（message））；
}否则{
const currBin=bin[bin.length-1]；
if（currBin.from==message.from）{
currBin.messages.push（消息）；
}否则{
bin.push（createBin（message））；
}
}
回收箱；
}, []);
};
常量渲染=（容器）=>{
返回bin.map（bin=>{
返回`
${bin.from}
${bin.messages.map（（消息、索引、全部）=>{
返回`
${message.content}
`
}).join（“”）}
`;
}).加入（“”）；
}
返回呈现（binMessages（messages））；
}
document.querySelector（'.chat'）.innerHTML=renderMessages（消息）
正文{
背景色：黑色；
}
.聊天{
宽度：计算（100%-20px）；
/*边框：实心1px粉红色*/
显示器：flex；
弯曲方向：立柱；
填充：10px；
边距：0自动0自动；
溢出：自动；
}
.留言{
边缘顶部：30px；
显示器：flex；
弯曲方向：立柱；
}
.留言{
边界半径：20px；
填充：4px15px；
页边顶部：1px；
边缘底部：1px；
显示：内联块；
}
.你的{
调整项目：灵活启动；
}
.你的.留言{
右边距：25%；
背景颜色：紫色；
位置：相对位置；
}
.你的.留言.最后：在{
内容：“；
位置：绝对位置；
z指数：0；
底部：0；
左：-7px；
高度：20px；
宽度：20px；
背景：紫色；
边框右下半径：15px；
}
.你的.留言.最后：之后{
内容：“；
位置：绝对位置；
z指数：1；
底部：0；
左：-10px；
宽度：10px；
高度：20px；
背景：黑色；
边框右下半径：10px；
}
.我的{
对齐项目：柔性端；
}
.我的.留言{
颜色：白色；
左边缘：25%；
背景：线性梯度（至底部，#00D0EA 0%，#0085D1 100%）；
背景附件:f