Ahora veamos algo muy parecido al ejemplo anterior:

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: innerText 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").innerText = "Hola Mundo"
            </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 no fue sustituido como con innerHTML y lo notamos por el tamaño del texto sigue siendo el asignado a un parrafo que es más pequeña que el de un encabezado.

Resumen:Acabamos de aprender a cambiar nuestro archivo HTML el contenido de un elemento sin sustituir el elemento HTML.