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:
- Seleccionar elementos en el DOM.
- Modificar el contenido HTML de un elemento.
- 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
- Las maravillas de las ciencias biológicas según la Academia SanRoque
- La motivación en Academia SanRoque
- Los docentes también se divierten.
- Comandos Principales en MongoDB y sus Equivalentes en Java
- Las bondades de escribir y leer cada día: herramientas esenciales para la vida académica, empresarial y social
- Immanuel Kant: Disertación contra las IA
- Forma Normal de Boyce-Codd (FNBC) en Bases de Datos
- Las Formas Normales en Bases de Datos
- La importancia de rodearte de personas virtuosas para alcanzar tus metas
ELIGE TU RED FAVORITA Y SÍGUENOS.
AYUDANOS A CRECER Y A LLEGAR A TODAS LAS PERSONAS QUE NOS NECESITAN.
Contenido restringido
Comments are closed