怎么实现DIV只能展示3条数据，新增数据的数据会把之前的数据顶上去，类似于向上的数据滚动。

Question

未新增数据之前
<div>
<p id=1>
<p id=2>
<p id=3>
</div>

新增之后，p1可以被删除也可以被隐藏
<div>
<p id=2>
<p id=3>
<p id=4>
</div>

怎么实现DIV只能展示3条数据，新增数据的数据会把之前的数据顶上去，类似于向上的数据滚动。DIV的overflow属性可以将溢出的内容隐藏可是不能展示新内容。

数据新增是由事件被触发后javascript新增。

Answer 1

用 css 就可以解决你说的问题。如下：

<div class="only3children">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

.only3children > p {
    display: none;
}
/* 只显示最后三条 */
.only3children > p:nth-last-child(3), .only3children > p:nth-last-child(3) ~ p {
    display: block;
    /* 如果需要动效可以在这里添加 */
    animation: fadeIn .3s ease both; 
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1; 
    }
}

Answer 2

如果是用了mvvm框架，像vue,这样改变数据，视图就可以同步更新，很简单。如果用jquery把dom获取出来，删掉第一条数据，在append了。

Answer 3

采用新增节点的方法，当事件被触发时新增节点。在触发事件内获取当前DIV的所有子元素 var cont=document.getElementById(DIV).childNotes，使用if判断判断当前元素的长度，如果大于N则删除con[0];
形成一种DIV只有N个元素，且新增元素会将之前的元素顶上去的效果。