Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

Estructuras básicas (I)

4.1 Insertar elementos

Buscar un elemento

Hasta ahora, si queremos poner algún elemento dentro de la página mediante javascript hemos utilizado la instrucción document.write, la cual nos obliga a escribir el script justo en el punto de inserción. Veremos ahora otras instrucciones mediante las cuales, primero localizamos el punto de la página que queremos modificar, y después insertamos ahí un nuevo elemento. Con esto el punto de inserción del script es independiente del lugar en donde se va a insertar.

Aunque hay otras formas de insertar los elementos hechos con javascript en la página, ésta suele ser la más habitual:

En primer lugar, el código HTML que queremos modificar debe llevar una etiqueta id: Ejemplo :

<p id="cambiar">Texto a modificar con javascript</p>

Luego en el código javascript, buscamos el elemento con la instrucción:

document.getElementById("cambiar");

con esta instrucción el navegador buscará en el documento (document) aquel elemento que tenga en su atributo id el valor indicado dentro del paréntesis, el cual debemos escribirlo entre comillas (podemos pasar éste valor como una variable de texto, en este caso no usaremos comillas).

Guardamos después el resultado obtenido en una variable; es decir, el acceso al elemento de la página se guarda en una variable para poder trabajar con él de una manera simple. Esto lo haremos así:

var elemento = document.getElementById("cambiar")

Modificar el elemento

Leer el contenido

Una vez hemos accedido al elemento podemos ver o cambiar su contenido mediante la propiedad innerHTML de la siguiente manera:

var elemento = document.getElementById("cambiar")
var contenido = elemento.innerHTML

En la primera línea buscamos el elemento mediante getElementById(" ") , y en la segunda línea accedemos al contenido del elemento mediante innerHTML

Podríamos haberlo puesto todo en una línea, accediendo directamente al contenido del elemento, de la siguiente manera:

var contenido = document.getElementById("cambiar").innerHTML

Fíjate que para acceder a un elemento partimos desde el nivel más general de la página (document), hasta llegar al contenido concreto. Cada paso lo escribimos separándolo del anterior por un punto ( . ).

El código anterior nos ha permitido leer el contenido del elemento, pero mediante este código podemos también cambiar o modificar el contenido del elemento.

Cambiar el contenido

Para cambiar el contenido de un elemento, seguiremos los siguientes pasos:

En primer lugar debemos crear el contenido nuevo que queremos que tenga el elemento, y guardarlo en una variable: ejemplo:

var texto = "Nuevo texto para este elemento"

Después accedemos al elemento al que queremos cambiar su contenido. y lo guardamos en una variable.

var elemento = document.getElementById("nombre_id")

Por último damos al elemento el nuevo valor que hemos guardado, mediante la propiedad innerHTML:

elemento.innerHTML = texto

Ampliar el contenido.

Si lo que queremos es ampliar el elemento añadiendo más contenido al ya extistente, lo que haremos será seguir los mismos pasos que para cambiar el contenido, pero en lugar de sustituirlo, sumamos el contenido anterior con el nuevo:

var texto = "Añadir este texto al elemento"
var elemento = document.getElementById("nombre_id")

Hasta aquí el código empleado es el mismo que en el punto anterior, ahora en lugar de usar el signo igual ( = ), usaremos el operador de asignación con suma ( += ), con lo cual al contenido ya existente le añadiremos el contenido nuevo.

elemento.innerHTML += texto

Ejemplo de uso de la instrucción innerHTML.

Mostraré aquí una página de ejemplo en la que se ve el uso de esta instrucción para leer, cambiar o modificar texto. Como siempre, daremos primero el código de la página.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Acceder al documento.</title> 
  <style type="text/css">
    #texto1, #texto2, #texto3  { font: bold 0.9em arial; color: blue; }
  </style>
</head>
<body>
  <h1> Acceder al documento.</h1>
  <p id="texto1"> Este texto debe ser leido por javascript</p>
  <p onclick="alert(contenido1)">Pulsa aquí para leer el texto anterior.</p>
  <p id="texto2">Este texto debe ser sustituido por el código javascript.</p>   
  <p onclick="elemento2.innerHTML = texto2">Pulsa aquí para cambiar el texto anterior.</p>
  <p id="texto3">Este texto debe ser ampliado mediante código Javascript.</p>
  <p onclick="elemento3.innerHTML += texto3">Pulsa aquí para ampliar el texto anterior.</p>
  <script type="text/javascript">
  //lectura del elemento 1
    elemento1 = document.getElementById("texto1")
    contenido1 = elemento1.innerHTML
  //sustituir el elemento 2. El último paso está en la instrucción onclick
    var texto2 ="este es el texto ya cambiado"
    elemento2 = document.getElementById("texto2")
  //Ampliar el elemento 3. El último paso en la instrucción onclick
    var texto3 = "Y esta es la frase para la ampliación del texto."
    var elemento3 = document.getElementById("texto3")
  </script>
</body>
</html>

Para ver la como queda la página pulsa en el siguiente enlace:

Elementos con innerHTML

En el código anterior está destacado en verde el código CSS y en color siena el código de javascript. Observa que hemos puesto también unos comentarios en el código javascript. Estos los hemos destacado con un color lila y letra en itálica.

El código javascript aplicado es el explicado anteriormente para leer, cambiar o añadir elementos mediante la instrucción innerHTML, las últimas instrucciones las hemos puesto en los atributos onclick para que el cambio se produzca cuando pulsamos el ratón encima de esos párrafos.

El script está puesto al final de la página, porque la instrucción getElementById requiere que se haya cargado la página (o al menos la etiqueta a que se refiere) para que éste se ejecute. Si cargamos el script antes que la etiqueta, éste no funcionará.

En temas posteriores veremos como solucionar estos problemas, y que el script funcione poniendo el código en cualquier punto de la página.

La instrucción innerHTML junto con document.getElementById() no es el único método de acceder y cambiar los elementos de la página. En temas posteriores veremos otros métodos.

En la página siguiente veremos cómo guardar los datos o variables en unas estructuras parecidas a las listas, éstas se llaman arrays

Arrays

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com