COMPARTE ESTE ARTÍCULO

JavaScript es una herramienta esencial para los desarrolladores web que buscan interactuar y modificar el contenido de una página web de manera dinámica. Uno de los métodos más utilizados para lograrlo es innerHTML, que permite cambiar el contenido HTML de los elementos del DOM (Modelo de Objetos del Documento). Este artículo proporciona un ejercicio práctico para entender cómo utilizar innerHTML para modificar el contenido de una página web.

Objetivo del Ejercicio

El objetivo de este ejercicio es modificar el contenido de un párrafo en una página web usando innerHTML. Los usuarios aprenderán a:

  1. Seleccionar elementos en el DOM.
  2. Modificar el contenido HTML de un elemento.
  3. Aplicar eventos de JavaScript para interactuar con la página.

Requisitos Previos

Antes de comenzar, asegúrate de tener un conocimiento básico de HTML y JavaScript. También necesitarás un editor de texto para escribir tu código y un navegador para ver el resultado.

Paso 1: Crear el Archivo HTML

Primero, crea un archivo HTML básico. Puedes nombrarlo index.html. Dentro del archivo, define un párrafo con un id que usarás para modificarlo más adelante.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio de JavaScript con innerHTML</title>
</head>
<body>
    <p id="textoDemo">Este es el texto original del párrafo.</p>
    <button onclick="modificarTexto()">Cambiar Texto</button>

    <script src="script.js"></script>
</body>
</html>

Paso 2: Escribir el Script de JavaScript

Crea un archivo llamado script.js. Aquí escribirás la función que modifica el contenido del párrafo cuando el usuario haga clic en el botón.

function modificarTexto() {
    document.getElementById('textoDemo').innerHTML = 'Este es el nuevo texto modificado.';
}

Este script sencillo selecciona el párrafo por su id y luego cambia su contenido utilizando innerHTML.

Paso 3: Probar el Código

Abre tu archivo index.html en un navegador. Deberías ver un párrafo y un botón. Al hacer clic en el botón, el texto del párrafo debe cambiar a “Este es el nuevo texto modificado”, demostrando que innerHTML funciona correctamente.

Conclusión

El método innerHTML es una herramienta poderosa para los desarrolladores que quieren modificar el contenido HTML de manera dinámica. Aunque es fácil de usar, es importante recordar que debe usarse con cuidado debido a posibles problemas de seguridad como ataques de inyección de scripts si se manejan entradas de usuario.

Este ejercicio básico es solo el principio. ¡Experimenta con innerHTML para ver qué más puedes lograr!

Este artículo te brinda una base sólida sobre cómo trabajar con innerHTML en JavaScript, facilitando la manipulación dinámica del contenido de las páginas web.


¿QUÉ TE HA PARECIDO EL ARTÍCULO? Danos tu opinión al final de la página.
Deja tu comentario y ayúdanos a crecer.


¡SÍGUENOS EN TUS REDES FAVORITAS!
AYUDANOS A CRECER Y QUE LLEGUEMOS A TODAS LAS PERSONAS QUE NOS NECESITANA. SÍGUENOS EN TUS REDES.
Entra AQUÍ y elíge donde seguirnos. 

 

 


NUESTRAS ÚLTIMAS PUBLICACIONES

AYUDANOS A CRECER Y A LLEGAR A TODAS LAS PERSONAS QUE NOS NECESITAN.

Contenido restringido

Acceso de usuarios existentes
   
Registro de un nuevo usuario
*Campo necesario

Categories:

Tags:

Comments are closed

Estado de acceso
ESTADO DE ACCESO
TRADUCTORES
COMPARTENOS
error: CONTENIDO PROTEGIDO