Foros del Web - Ver Mensaje Individual

Naahuel · #2 (**permalink**) 13/03/2012, 08:17

Va a depender de cómo estés mostrando tus datos. Con una lista, una tabla, etc.

Ejemplo con lista:

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <title>Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var nuevoDato = 'Audite deo hanc cuius ad nomine Stranguillio eam eos cui sed esse haec in.';
            var contenedor = $('ul#lista-de-datos');
            $('#insertar-datos').click(function(){
                var nuevoElemento = $('<li />');        //crear nuevo elemento
                nuevoElemento.text(nuevoDato).hide();   //asignar texto al nuevo elemento y esconderlo por defecto.
                contenedor.prepend(nuevoElemento);      //agregar elemento nuevo al principio
                nuevoElemento.slideDown();              //aplicar animación
            });
        });
    </script>
    <style type="text/css">
    <!--
        ul{
            width:500px;
            margin:30px;
            padding:0;
        }
        ul li{
            list-style:none;
            padding:5px;
            margin-bottom:2px;
            background:#CCC;
        }
        ul li:nth-child(odd){
            background:#EEE;
        }
    -->
    </style>
</head>
<body>
    <button id="insertar-datos">Insertar dato nuevo</button>
    <ul id="lista-de-datos">
        <li>Lorem ipsum dolor sit amet, tempore Quaere allocutus ait regem consolatus dum animae tuae designaverant ut a civitas ex quae.</li>
        <li>Non potentia feugiat o sanguine instaret terrae in. </li>
        <li>Volentes mihi servitute meam contra me naufragus qui non potentiae. </li>
        <li>Navibus celebrent duo elitr qui enim.</li>
    </ul>
</body>
</html>

El ejemplo está comentado para que lo comprendas y puedas modificar a tu gusto y necesidad.

Saludos