miércoles, 13 de febrero de 2013

Añadir texto al inicio de un objeto con prepend()

Asi como tenemos el método append(), que añade texto al final de un párrafo, tenemos el método prepend() para añadirlo al inicio. Aunque es un poco menos común su uso, aqui ponemos un ejemplo del mismo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Val</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
var poema = new Array()
poema.push("EN EL AGUA CLARA");
poema.push("QUE BROTA EN LA FUENTE,");
poema.push("UN LINDO PESCADO");
poema.push("SALE DE REPENTE");
poema.push("-LINDO PESCADITO,");
poema.push("¿NO QUIERES VENIR");
poema.push("A JUGAR CON MI ARO?");
poema.push("VAMOS AL JARDIN");
var i = poema.length-1;;
var ii = i;
$(document).ready(inicio);
function inicio(){
    $("#boton1").click(onTexto);
    $("#boton2").click(onLista);
}
function onTexto(){
    if(i>=0){
        $("p").prepend(poema[i]+"<br>");
        i--;
    }
}
function onLista(){
    if(ii>=0){
        $("ol").prepend("<li>"+poema[ii]+"</li>");
        ii--;
    }
}
</script>
</head>
<body>
<input type="button" value="Añadir texto" id="boton1"/>
<input type="button" value="Añadir lista" id="boton2"/>
<p></p>
<ol></ol>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/Prepend.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

No hay comentarios:

Publicar un comentario