Javascript 如何通过按下最旧的元素并将其置于顶部来逐个显示元素？

我有一个对象数组，对象是注释。 我想显示所有的评论，但首先将是3条评论，从第四条评论，它将呈现到顶部，并按下其他评论。 （CSS、HTML、Java脚本）

我的代码

function createComment(comments) {
  for (let i in comments) {
    setTimeout(() => {
      let item = comments[i];
      const { name, image, date, content } = item;

      let comment = new Comments(name, image, date, content);
      comment.renderToHtml();
    }, 1000 * i);

```renderToHtml() {
    let newDiv = document.createElement("div");
    newDiv.className = "comment col-lg-12 border p-1 mt-3 text-right";
    id_row.appendChild(newDiv);

    newDiv.innerHTML += `<img
        src="${this.image}"
        alt="${this.name}"
        width="80"
        class="float-right m-1 border img"
      />
      <h5 class="name">${this.name}</h5>
      <p class="date">${this.date}</p>
      <p class="content">
        ${this.content}
      </p>`;
  } 

函数createComment（注释）{
for（请允许我发表评论）{
设置超时（（）=>{
让项目=注释[i]；
常量{name，image，date，content}=item；
let comment=新评论（名称、图像、日期、内容）；
comment.renderToHtml（）；
}，1000*i）；
```renderToHtml（）{
让newDiv=document.createElement（“div”）；
newDiv.className=“注释col-lg-12边框p-1 mt-3文本右侧”；
id_row.appendChild（newDiv）；
newDiv.innerHTML+=`
${this.name}
${this.date}

${this.content}
`；
} 

现在，它的显示注释会一个接一个地延迟1秒，但不会将最早的注释推到底。新注释将始终是最后一个替换注释

id_row.appendChild（newDiv）；

借

id\u row.insertBefore（newDiv，id\u row.firstChild）；

方法

insertBefore

的工作原理与

appendChild

相同，但它在作为第二个参数传递的元素之前插入元素

id\u row.firstChild

作为第一个元素，新的div将插入第一个位置

[编辑]如何显示3条评论，然后显示其他评论

函数createComment（注释）{
for（请允许我发表评论）{
让项目=注释[i]；
常量{name，image，date，content}=item；
let comment=新评论（名称、图像、日期、内容）；
常数超时=0；
如果（i<3）{//对于前3个
comment.renderToHtml（）；//立即渲染
其他的{//
timeout=1000*（i-3）；//计算一个增长的超时
//（每条评论多1秒钟）
设置超时（（）=>{
comment.renderToHtml（）；//然后只调用renderToHtml的setTimeout
}，超时）；
}
}

寻求代码帮助的问题必须包含在问题中复制所需的最短代码，最好是在a中。请看，我尝试将其缩短，因为我可以进行编辑！最后一个问题是，我如何第一次显示仅呈现前3条注释的页面，然后在延迟后，像现在一样逐个显示其他注释@DavidNahum-此论坛不用于讨论。您的问题已被回答，应标记为已回答。您应为另一个问题创建新的主题，而不是在评论中提问。：）