Cambiar el contenido de una capa con JavaScript

03/Mar/2008 JavaScript , , 10 Comentarios

Raro sería encontrarnos una nueva página que no estuviese diseñada basada en capas y lo estuviese en tablas como se diseñaba tiempo atrás.

Y es que las capas conjunto con las hojas de estilo CSS son la base de toda página web con un buen diseño.

Es por ello que el saber como cambiar el contenido de una capa, completará los diseños permitiendo el dinamismo sobre la misma.

Los pasos para cambiar el contenido de una capa con JavaScript son muy sencillos. Lo primero será el crear un capa. Las capas se crean mediante el elemento DIV.

  1. <div id="micapa">Contenido de mi capa...</div>

Es muy importante el dotarle de un identificador a la capa. Esto lo conseguimos mediante el atributo id. Y es que mediante el código Javascript accederemos a la capa y a su contenido con dicho ID. En este caso será el método getElementById sobre el que nos apoyaremos.

Una vez obtenido el acceso a la capa tenemos acceso al atributo innerHTML, el cual representa su contenido. Por consiguiente, para cambiar el contenido de una capa habrá que modificar el contenido de este atributo.

Un código de ejemplo sería el siguiente:

  1. function cambiarContenido(texto){
  2. document.getElementById("micapa").innerHTML = texto;
  3. }

Solo nos quedará invocar a este método. En este caso utilizamos un formulario para que el usuario pueda proporcionar el contenido mediante un textarea.

  1. <form id="miform" action="#">
  2. <textarea rows="10" cols="20" id="texto">Nuevo contenido...</textarea>
  3. <button onClick="cambiarContenido( getElementById('texto').value );">
  4. Cambiar texto
  5. </button>
  6. </form>
  7.  

Vídeos sobre Javascript


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

10 comentarios en “Cambiar el contenido de una capa con JavaScript”

Víctor Cuervo

ODISEO

Y cómo muestro diferentes páginas, cada uno con su respectivo enlace, en el mismo div, es decir, si hago click en el link1, se muestre la página 1 en el div; igual para el link2, link3, etc.

Víctor Cuervo

lineadecodigo

@Marcelo,

Eso se puede hacer con AJAX… Me pongo manos a la obra y publicaré un artículo de cómo hacerlo.

Víctor Cuervo

Lola

No puedo dejar comentarios en el libro d visitas d ismael serrano porque ellos no quieren que se opine de su vida privada y yo solo hice un chiste sobre un comentario,se borran mis comentarios o no me dejan firmar,supongo habran detectado mi ip,me ayudan con esto,que creo es censura,ya que nunca insulte a nadie ni mucho menos,gracias

Víctor Cuervo

Marcelo

Hola colega! Excelente las explicaciones. Tengo una duda… tu sabes como se hace este paginador con javascript?

http://www.daria.com.ar/propiedades.php?rubro=C&ubicacion=&operacion=1&moneda=1&CotizacionDolar=3.14&montodesde=0&montohasta=50.000.000&Submit=BUSCAR+PROPIEDAD

Me pareció muy interesante ya que muestra los resultados dentro de un DIV y al paginarlos no se resetea la página. Es importantísimo por si alguien tiene (como en mi caso) un flash en la parte superior con música el cual no debería reiniciarse cada vez que paso de página.

Me podrías decir cómo lo hace? El código está dentro de la misma página.

Saludos y gracias.

Marcelo.

Víctor Cuervo

Oscar

HOLA A TODOS, TENGO UN PROBLEMA TAMBIEN, HAGO EL MISMO PROCEDIMIENTO Y EN UNOS DIV SI SALE PERO EN OTROS NO, ESPERO ME PUEDAN AYUDAR SOBRE EL PORQUE NO ME MUESTRA NADA.

Víctor Cuervo

sarah

como puedo saber el nombre de las capas que tiene mi pagina web??? estoy usando el wform para validar un formualario, pero necesito limpiar una capa que genera el wform, el problema es que no se que nombre les pone, puedes ayudarme?????

Víctor Cuervo

pepe Locuaz

los quiiero muchacones

Víctor Cuervo

sandra

No me resulta , quiero mostrar el contenido, de una pagina q guarde en codigo HTML, la cual guarde en una BD, y hay errores,

Víctor Cuervo

mauro

solucionado! le puse \” a las comillas y listo… era tan simple!

gracias!

mauro

Víctor Cuervo

mauro

hola,
intenté hacer el mismo script pero mezclado en una rutina PHP, y tengo un problema… este es el script:

function postfix(objeto, cadena) {
document.getElementById(objeto).innerHTML = cadena;
}

esta es la sentencia:

$cadena = “hola mundo”;
echo ” “;

cuando $cadena tiene espacios o saltos de linea (como “hola mundo”), el script no anda. Por lo que vi en tu script lo llamas usando tanto comillas simples como dobles, esto no lo puedo hacer en mi script php porque estoy usando las comillas dobles en el echo… alguna idea?

muchas gracias.
saludos!

mauro

¿Algo que nos quieras comentar?

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

*

*