Linea de Codigo

En el artículo Modificar el contenido de una capa con Prototype nos comentaban si podíamos explicar como hacerlo en jQuery. Así que manos a la obra.

Lo primero, pues una capa. Y en este caso. Lo más importante es darle un ID a la capa:

 
<div id="micapa">Capa con algo de texto</div>
 
<button id="miboton">Cambiar el contenido</button>

Para darle un poco más de interactividad, mediante el elemento button hemos añadido un botón, el cual nos permitirá cambiar el contenido de la capa.

Asumiendo que ya tenemos el jQuery instanciado. Pero por si hay algún despistado:

<script type="text/javascript" src="jquery.js"></script>

Vamos al meollo de la cuestión, modificar el contenido de una capa. Lo primero que hacemos es controlar el evento click del botón. Recuerda que el acceso a los elementos se hace anteponiendo una almohadilla al ID del elemento.

$("#miboton").click(function(){...});

Dentro de la función podremos el código para modificar la capa. Para acceder a la capa, lo mismo, anteponemos la alhomadilla al ID (por eso decía lo de la importancia del ID) y el método que nos permite acceder al contenido es .html()

$("#micapa").html("Nuevo contenido de la capa");

Y todo el código junto, y dentro de la función ready() de jQuery, nos quedaría de la siguiente forma:

$(document).ready(function(){
 $("#miboton").click(function(){
    $("#micapa").html("Nuevo contenido de la capa");
 });
});

Un ejemplo muy limpio para ver como se programa con código script no intrusivo apoyándonos en jQuery.

Por cierto, es mejor Prototype o jQuery. O eres de los que usas Dojo?