Para poder seguir este curso debes tener conocimentos de los lenguajes HTML y CSS para construir páginas Web. Si no es así puedes aprenderlo en Aprende Web
Logo Aprende Web

Aprende Web

curso de JAVASCRIPT

por Anyelguti


Tema 4: Estructuras básicas

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 insertar el script justo en el punto de escritura. 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.

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 bucará en el documento (document) aquel elemento que tenga en su atributo id el valor indicado dentro del paréntesis, el cual debe escribirse entre comillas. Este elemento podemos guardarlo en una variable, de la siguiente manera:

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.

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 este 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 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 poner los datos o variables en listas llamadas arrays

4.2. Arrays


Ir a la página

anteriorAnterior     Siguiente siguiente

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com manda un correo