¿Qué puede mostrar JavaScript en pantalla?

Una de las facultades que tiene JavaScript es mostrar datos en pantalla.

Esto es muy útil para que el sitio sea aun más intuitivo con los recursos que obtiene de HTML.

Veamos una manera en que se puede realizar:

¡Advertencia!: No todos los ejemplos en éste tema se podrán representar. Incluso, algunos no se recomiendan utilizar a menos que sea muy necesario.

innerHTML

Se escribe dentro de un elemento HTML.

Ejemplo:

Para ello necesitamos dos cosas:

a) Necesitamos acceder al elemento HTML y para ellos utilizaremos el método: document.getElementById( )

b)Además usaremos el atributo id

c) Y la propiedad más importante: innerHTML que nos va a permitir cambiar el contenido del elemento HTML al que apunte el "id".

Comencemos con la estructura básica de un archivo HTML

        <!DOCTYPE html>
        <html>
        <body>
            <h1></h1>
            <p></p>
        </body>
        </html>

Ahora vamos a agregar un Encabezado y dos Párrafos. En Encabezado será normal, pero pongamos atención en los párrafos.

        <!DOCTYPE html>
        <html>
        <body>
            <h1>Página de Ejemplo</h1>
            <p>Página de Ejemplo</p>
            <p id="demo"></p>
            <script>
                document.getElementById("demo").innerHTML = "<h2>Hola Mundo</h2>"
            </script>
        </body>
        </html>

Lo primero que vamos a encontrar es el párrafo donde se utiliza el atributo id y en este caso le da nombre de "demo" a todo el contenido que está entre las etiquetas del párrafo. Que si nos damos cuenta no tiene nada, está vacío.

Después se utilizará el Elemento script con las etiquetas script y entre ellas el método document.getElementById seguido de un paréntesis donde pondremos nombre del id que se le ha asignado a algún elemento html. En este ejemplo el único elemento al que le hemos asignado nombre con el atributo id es al párafo anterior. Eso significa que ese páraffo sufrirá los cambios que le demos apartir del punto después del paréntesis, que en nuestro ejemplo es: innerHTML que permite modificar el contenido del elemento apuntado con el nombre demo. Continua con el caracter de asignación y entre comillas la línea que se escribirá en el archivo HTML actual, es decir, cambiará de Párrafo a Encabezado.

Se cierra el Elemento script y con ello nuestro ejemplo.

¿Cómo se vería en nuestra web? De la siguiente manera:

Página de Ejemplo

Página de Ejemplo

Fin del ejemplo

Si observamos, el primer Página de Ejemplo tiene el tamaño de letra de un encabezado h1.

Después, el siguiente Página de Ejemplo tiene el tamaño de letra de un párrafo.

Ahora, el elemento que se le asignó el nombre demo es de inicio un párrafo, pero después de la aplicación del script observamos dos cosas importantes:

1. El contenido vacío que tenía el párrafo fue sustituido por Hola Mundo

2. El elemento párrafo fue sustituido por un encabezado y lo notamos por el tamaño del texto donde el parrafo es más pequeña que el de un encabezado y el formato normal del párrafo y en negrita de un encabezado.

Resumen:Acabamos de aprender a cambiar nuestro archivo HTML el contenido de un elemento, incluso hemos cambiado el elemento de párrafo a encabezado.