Modificar el contenido de una capa con jQuery

27/May/2010 jQuery , 3 Comentarios
programación jquery en español

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


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

Víctor Cuervo

stefanya

Me sirvió un montón, mil gracias.

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 😀

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*