miércoles, 23 de mayo de 2012

Añadir contenido con append() Jquery



Añadir contenido con append() Jquery

Con la función append(), podemos añadir contenido nuevo a un elemento sin eleminar el que ya está, esto mismo ocurre con las funciones html() y text(), es de decir si tenemos un párrafo con el contenido "hola que tal" con la función append podemos añadir contenido a ese párrafo sin tener que eliminar el contenido ya existente.

Para verlo más claro haz click en el siguiente botón, se irá añadiendo nuevo contenido, respetando el ya existente...


Haz click sobre el botón...


El código es el siguiente...

<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$(":button#boton").click(function(){
$("#caja").append("<span style='font-size: 20px;'>Has añadido contenido nuevo, sin eliminar el contenido anterior.</span>");
});
});
</script>
</head>
<body>
<input type="button" id="boton" value="append() añadir contenido nuevo">
<div id="caja">Haz click sobre el botón... </div>
</body>
</html>