miércoles, 4 de junio de 2008

Cambiar el contenido de un div usando JavaScript

Para muchos que usan Javascript, el cambiar el contenido de un div es muy sencillo, pero opte por mostrar como se puede hacer ésto para las personas que apenas se están iniciando con Javascript.

Para demostrar como podemos hacer la modificación del contenido de un div al vuelo con javascript, usaré un botón para llamar a una función que se encargará de cambiar el contenido.

Definiremos el div que vamos a usar de la siguiente manera:

<div id="divXCambiar" style="width: 100%;border:1px solid #000000;">HOLA</div>

En la definición anterior del div, es importante el atributo id, ya que con él, es con el que podremos alterar el contenido del div.

La función que se va a encargar de cambiar el contenido será la siguiente (recuerda que deberá ponerse ya sea en un archivo .js o definirla de preferencia entre las etiquetas <head> y </head>):

<head>
function cambiar()
{
document.getElementById('divXCambiar').innerHTML = "ADIOS";
}
</head>

Como podemos ver, la función únicamente cuenta con una línea, en la que por medio del id divXCambiar le asignaremos el valor ADIOS, haciendo referencia a través de la propiedad innerHTML.

Ahora colocaremos el botón que hara el cambio del texto HOLA por el texto ADIOS.

<input type="button" value="Cambiar" onClick="cambiar();">

Aquí podemos observar que asignamos la función cambiar() que anteriormente definimos, al evento onClick del botón.

Esto es todo lo que tenemos que hacer, para ver como funciona este ejemplo, presiona sobre el botón cambiar y podremos ver el cambio del texto que se encuentra dentro del div.

HOLA

7 comentarios:

Martha dijo...

Tengo esto para crear un base de datos en MYSQL pero en que ruta tengo que estar para crearla

create database db_nombre;

INSERT INTO user VALUES('localhost', 'us_proyesp', PASSWORD('passs'), 'n', 'n', 'n', 'n', 'n', 'n', 'n', 'n', 'n', 'n', 'n', 'n', 'n', 'n', 'n', 'n', 'n', 'n', 'n', 'n', 'n', '', '', '', '', 0, 0, 0);

INSERT INTO db VALUES('localhost', 'db_proyesp', 'us_proyesp', 'y', 'y', 'y', 'y', 'y', 'y', 'y', 'y', 'y', 'y', 'y', 'y');

FLUSH PRIVILEGES;

antes de ejecutar esos comandos revisa el numero de cempos que tiene la tabla db y la de user

show db;

show user;

y comparas el numero de campos con el numero de paramatros que estas metiendo en los inserts q te estoy pasando

si es = numero de campos no hay problema

haces la prueba para revisar que el usuario se puede conectar a la base de datos

desde el shell, intenta conectarte a la base de datos con el usuario

mysql --user usuario -p

javoaxian dijo...

Hola Martha, espero estes bien, antes de responder tu duda, te quisiera perdir de favor si puedes hacer las preguntas que necesitas en algún post que se refiera al tema de tu duda para no distorsionar el tema del post.

Veo que te estás complicando mucho en crear una base de datos y el usuario que tendrá acceso a ella. Para poderte ayudar con esto, revisa este post que te indica cómo crear una base de datos y un usuario de mysql, además de la forma de conectarte a la base de datos con el usuario.

Junior dijo...

Y como hacer para que el HOLA no se pierda? :|

Saludos.

Anónimo dijo...

y si en lugar de cambiar el texto de un div yo quiero cambiarlo x un html? como hago?

Anónimo dijo...
Este comentario ha sido eliminado por el autor.
PepeLuis dijo...

el ejemplo que has puesto es para cambiar el contenido, ¿ pero como haría para cambiar también los tag? no solo el texto fijo

me explico: tengo una pagina que puede tener 5 tipos de productos y dependiendo de el tipo que elijan saldrían los productos de cada tipo que pueden variar en 5 y 20, por desconocimiento y prisa no puedo usar bases de datos y el ocultar y mostrar capa (que es como lo tenia hasta ahora)no me vale porque utilizo un script que solo me funciona en la primera capa . si fueran siempre las mismas cantidades no tendria problema, se dejan los tag y se cambia solo el contenido fijo, ya que es repetitivo

como puedo borrar el contenido de la capa y crearlo de nuevo?
muchas gracias de antemano

Anónimo dijo...

Hola, estoy iniciandome en el mundo de Javascript, me gustaría saber hacer un formulario pero en vez de usar alert para validar los campos me gustaría personalizar un div con el mensaje de validación.
Muchas gracias.