Modificar el contenido de una capa con Prototype

En los últimos años de la web estamos tendiendo a interfaces de usuario con muchísima funcionalidad y mayor dinamismo. En todo este flujo de información, los elementos se van modificando y actualizando. Normalmente en forma asíncrona.

Es por ello que es bueno que sepamos como podemos hacer esto vía código y utilizando el framework Prototype. Prototype nos ayudará mediante sus funciones a llevar a cabo nuestro cometido.

Lo primero que tenemos que saber es como acceder a una capa (asumimos que ya existe la capa). Para ello utilizaremos la función $() pasándole el id de la capa como parámetro.

$("idcapa");

Como queremos reaprovechar el código vamos a crear una función JavaScript que reciba el texto a poner en la capa y actualice el contenido de la misma. El contenido de una capa se puede modificar mediante el atributo .innerHTML. De esta forma nos quedaría la siguiente función:

<script type="text/javascript">
  function modificarCapa(texto){
    $('micapa').innerHTML=texto;
  }
</script>

Ahora solo nos quedará utilizar esta función desde alguna parte de la página. En nuestro caso hemos utilizado unos simples botones. Los cuales, mediante el evento onClick lanzarán dicho método:

<form action="#">
  <input type="button" value="Texto Uno" />
  <input type="button" value="Texto Dos" />
  <input type="button" value="Texto Tres" />
  <input type="button" value="Texto Cuatro" />
</form>

Todo muy sencillo. Y recordar el instanciar el framework Prototype al principio:

<script
  type="text/JavaScript"
  src="http://lineadecodigo.com/wp-content/uploads/2007/02/prototype.js"
></script>