jquery实现 收到新的消息后 排在最上面

这种效果怎么实现，收到最新一条后放在最顶部，也就现在5.5号的上面。其他的往下推移。
————————————|
| 消息框     总共5条消息|
| 5.5号                 |
| 5.4号                 | 
| 5.3号                 |
| 5.2号                 |
| 5.1号                 |
------------------------|
<tbody>
<tr>
  <td class="img"></td>
  <td class="msg"> 5.5号</td>
</tr>
<tr>
  <td class="img"></td>
  <td class="msg"> 5.4号</td>
</tr>
<tr>
  <td class="img"></td>
  <td class="msg"> 5.3号</td>
</tr>
<tr>
  <td class="img"></td>
  <td class="msg"> 5.2号</td>
</tr>
<tr>
  <td class="img"></td>
  <td class="msg"> 5.1号</td>
</tr>
</tbody>
</table>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.js'></script>
    <style type='text/css'>
    </style>
    </head>
    <body>
    <table id='t'>
    <tr>
      <td class="img"></td>
      <td class="msg"> 5.5号</td>
    </tr>
    <tr>
      <td class="img"></td>
      <td class="msg"> 5.4号</td>
    </tr>
    <tr>
      <td class="img"></td>
      <td class="msg"> 5.3号</td>
    </tr>
    <tr>
      <td class="img"></td>
      <td class="msg"> 5.2号</td>
    </tr>
    <tr>
      <td class="img"></td>
      <td class="msg"> 5.1号</td>
    </tr>
    </table>
    <input type='button' onclick='add()' value='add'/>
    </body>
    <script type='text/javascript'>
    function add()
    {
    var tb = $('#t');
    tb.find('tr:eq(0)').before($('<tr><td>111111</td><td>22222222</td></tr>'))
    }
      </script>
    </html>
      

  2.   

    <script type='text/javascript'>
    function add()
    {
        $("tbody").prepend($('<tr><td>111111</td><td>22222222</td></tr>'));
    }
      </script>
      

  3.   

    div css  overflow：hidden
    插入div用before方法 OK了
      

  4.   

    你应该设计成<li>的样式更加好