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:

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.

    
 
 
         
   Maria Del Carmen Hernandez Herrera 
 
 
 
  Contacte con Alejandro por recomendación de una compañera de trabajo a la cuál ayudó mucho en la preparación de unos exámenes muy complicados . La física y química para mi hija en este curso estaba siendo muy complicada, tanto es así ,que suspendió la primera evaluación y ella no había suspendido nunca, desde que acude a sus clases hay un antes y un después ...... Alejandro con su manera de explicar ha conseguido que las entienda , que pueda desarrollar los problemas que tenga confianza en sí misma....tanto es así que ha aprobado todos los exámenes....Paula está súper contenta y yo más!!!! Siempre que tengo alguna duda o que necesito modificar un horario responden super pronto y buscan solución motivo por el cuál recomiendo al 100% está academia. Muchas gracias por su ayuda.
  
 
        
   Arianna Del Campo Martín 
 
 
 
  Yo soy estudiante universitaria, muy finalista y que llegó a la academia con prácticamente cero base… Finalmente aprobé mi examen! Aquí de una manera diferente a lo que convencionalmente se espera de los profes, me enseñaron, muy cercanamente lo que me proporcionó confianza para no callarme las dudas y preguntar todo el tiempo. Me sorprendió que el profe que me dio clases en particular era como una enciclopedia andante, sin necesidad de mirar los libros me decía fórmulas de memoria que son difíciles de entender hasta con ellas delante. Recomiendo 100%
  
 
        
   Ariana García Esquivel 
 
 
 
  No he dudado ni por un segundo que haber asistido a las clases con Alejandro es lo mejor que me ha pasado… No solamente te apoya académicamente, sino que apoya al alumno a pesar de sus dificultades, y a mí me ha estado ayudando muchísimo y en mis peores momentos. Mil gracias por tus consejos, por siempre darme ánimos, por ser tan simpático que alegras las clases aburridas y por ser un profe tan bueno, son de estas personas que nunca olvidas.❤️👏🏻 También he de decir que Raúl, el otro profesor que se encuentra en la academia…es una persona que se preocupa por el alumno a que haga las cosas bien, con tranquilidad, está siempre pendiente a ti, tiene mucha paciencia, dedica a dar sus clases lo más dinámico posible, tiene mucha amabilidad con las personas, en definitiva… tengo a los dos mejores profesores del mundo, se os quiere mucho💓✨.
  
 
        
   Another Weasley. 
 
 
 
  He tenido muchos profes, y muchos particulares, pero como Alejandro ninguno, de verdad, me hace pensar que de verdad no soy tan mala en lo mío 🥺 me apoya muchísimo y me ayuda en todo lo que pueda con mi carrera, es un profesor 10 y una persona sobretodo 10000 Gracias Ale por preocuparte por tus alumnos, por intentar que estén motivados, que las clases sean entretenidas, y lo bien y fácil que explicas !  Para mi, LOS MEJORES 💖 -alba
  
 
        
   yarel febles 
 
 
 
  He entrado a la carrera de enfermería gracias a Alejandro, sin duda estoy súper contento con mi paso por aquí :)
  
 
        
   Ana Carina Benta 
 
 
 
  Gracias por el ambiente familiar
Gracias por la paciencia
Gracias por la enseñanza
Gracias por el apoyo
Gracias por la Motivación!!

Simplesmente Gracias!!

Recomendable 1000%
  
 
        
   Yanet Palacio valdes 
 
 
 
  Desde hace un tiempo mi hijo asiste a la academia, pensabamos no sacaba la eso y hoy con orgullo se gradúa de 4to de la eso,muy agradecida por los profesores,sobre todo su profe Alejando persona entrañable,justo, para el todo nuestro agradecimiento..⭐⭐⭐👌👌
  
 
        
   Mabett Duque 
 
 
 
  ¡De lo bueno lo mejor, y de lo mejor lo superior!
  
 
  
 
  
 
   La evaluación general en Google es 4.4 de 5, en base a 27 reseñas

¿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.

Solicita más información