Estou supondo que você está interessado apenas na parte visual da coisa, e que já tenha resolvido a parte de trazer os dados do servidor.
Criei um exemplo bem básico, usando jQuery. Não é exatamente igual ao do site, mas acho que fica com uma didática melhor.
Código HTML:
<input type="text" id="new-item" />
<input type="button" value="Adicionar" id="add-item" />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Código Javascript:
$(function() {
$('#add-item').on('click', function() {
var itemText = $('#new-item').val();
var newEl = $('<li>' + itemText + '</li>');
newEl.hide();
$('ul').prepend(newEl);
newEl.slideDown();
});
});
O prepend
adiciona um elemento no ínicio. Ele fica escondido por padrão (hide
), e depois é mostrado com o efeito slideDown
.
Para testar, é só escrever alguma coisa no textbox e clicar em "Adicionar". Criei um jsFiddle para facilitar: http://jsfiddle.net/V4aDn/
Se você quer deixar exatamente igual ao do site, será necessário estilizar, e também manipular os detalhes da velocidade do efeito.