Modificar el contenido de una capa con jQuery

27/May/2010 jQuery , 3 Comentarios

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:

  1. <div id="micapa">Capa con algo de texto</div>
  2. <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:

  1. <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.

  1. $("#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()

  1. $("#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:

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

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?

Vídeos sobre jQuery


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

3 comentarios en “Modificar el contenido de una capa con jQuery”

Víctor Cuervo

mark

pero..no se queda guardado no? cuando se actualiza vuelve a ponerse normal.
como podria hacer para que se pisara para siempre.
saludos!

Víctor Cuervo

Michael Pehl

would be better 🙂
There is much much more possible with jQuery 😀

Los comentarios están cerrados.