En el desarrollo web, JavaScript juega un papel crucial permitiendo a los programadores interactuar y manipular el contenido de las páginas web. Uno de los métodos más versátiles para realizar estas modificaciones es innerHTML
, que facilita la edición del HTML de los elementos del DOM. Este artículo ofrece un ejercicio de nivel intermedio para consolidar tu comprensión del uso de innerHTML
en JavaScript.
Objetivo del Ejercicio
Este ejercicio te guiará a través de la creación de una pequeña aplicación que permite a los usuarios añadir comentarios en una página web. Aprenderás a:
- Manipular el DOM para añadir elementos dinámicamente.
- Usar
innerHTML
para actualizar el contenido de manera interactiva.
Requisitos Previos
Para este ejercicio, es necesario tener conocimientos básicos de HTML, CSS y JavaScript. Necesitarás un editor de texto y un navegador para implementar y probar tu código.
Paso 1: Estructura HTML Básica
Crea un archivo HTML, por ejemplo comentarios.html
. Dentro de este archivo, define una estructura básica con un área para ingresar comentarios y un botón para publicarlos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Comentarios Dinámicos</title>
</head>
<body>
<h1>Libro de Visitas</h1>
<textarea id="areaComentario" placeholder="Escribe tu comentario aquí..."></textarea><br>
<button onclick="agregarComentario()">Publicar Comentario</button>
<div id="seccionComentarios">
<h2>Comentarios</h2>
</div>
<script src="comentarios.js"></script>
</body>
</html>
Paso 2: Script de JavaScript
Crea un archivo JavaScript, comentarios.js
. Aquí implementarás la función que añadirá los comentarios a la página cada vez que el usuario haga clic en el botón.
function agregarComentario() {
var comentario = document.getElementById('areaComentario').value;
if (comentario.trim() === '') {
alert('Por favor, escribe un comentario.');
return;
}
var seccion = document.getElementById('seccionComentarios');
seccion.innerHTML += '<p>' + comentario + '</p>';
document.getElementById('areaComentario').value = ''; // Limpiar el área de texto
}
Este script recoge el texto del área de comentarios, verifica si el usuario ha escrito algo y, si es así, añade este comentario a la sección de comentarios. También limpia el área de texto después de publicar el comentario.
Paso 3: Probar el Ejercicio
Abre el archivo comentarios.html
en tu navegador y prueba la funcionalidad. Deberías poder escribir comentarios y verlos aparecer en la página inmediatamente después de clicar el botón “Publicar Comentario”.
Conclusión
Este ejercicio muestra cómo utilizar innerHTML
para agregar contenido de manera dinámica a una página web. Aunque es una herramienta poderosa, es importante usarla con precaución, especialmente al manejar datos ingresados por los usuarios para prevenir problemas de seguridad, como la inyección de HTML.
Este tipo de ejercicios te prepara para tareas más complejas de manipulación del DOM y te proporciona una base sólida para seguir explorando las capacidades interactivas de JavaScript en el desarrollo 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