JavaScript puede cambiar el contenido HTML

  JavaScript puede cambiar el contenido HTML

¿Sabías que con JavaScript puedes modificar el contenido de una página web de forma dinámica? ¡Es una de las funcionalidades más poderosas del lenguaje!

Ejemplo práctico

En este código, al hacer clic en el botón, JavaScript cambia el texto del párrafo:

html
<!DOCTYPE html>
<html>
<body>

<h2>¿Qué puede hacer JavaScript?</h2>

<p id="demo">JavaScript puede cambiar el contenido HTML.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "¡Hola JavaScript!"'>
  ¡Hazme clic!
</button>

</body>
</html>

¿Cómo funciona?

  1. document.getElementById("demo") → Selecciona el elemento con el ID "demo".

  2. .innerHTML → Modifica el contenido HTML dentro del elemento.

  3. onclick → Ejecuta la acción al hacer clic en el botón.

📌 ¿Por qué es útil?

  • Permite actualizar contenido sin recargar la página.

  • Ideal para crear interacciones dinámicas (como contadores, mensajes personalizados, etc.).

¿Quieres aprender más sobre JavaScript? ¡Déjame tus dudas en los comentarios! 👇

#JavaScript #WebDevelopment #Frontend #Programming

Este post es claro, atractivo y explica el concepto de manera sencilla. ¿Te gustaría añadir algo más? 😊

Comentarios

Publicar un comentario

Entradas más populares de este blog

1-valores duplicados en un arreglo

 Debes encontrar valores duplicados en un arreglo de números enteros y  regresar un arreglo con los números que se repitan exactamente 2 veces. Prueba tu algoritmo para los siguientes casos: [4,3,2,7,8,3,1]=[32] [1,1,2] = [1] [1]=[] ¿Qué es un arreglo? Un   arreglo   (o array) es una estructura de datos que almacena una colección de elementos en un orden específico. Piensa en él como una   lista ordenada   donde cada elemento tiene una posición numerada. Características principales: Elementos : Pueden ser números, texto, objetos, etc. Índices : Cada elemento tiene una posición (empezando desde 0) Orden : Los elementos mantienen el orden en que fueron agregados Ejemplo visual: javascript // Arreglo de números let numeros = [ 4 , 3 , 2 , 7 , 8 , 3 , 1 ] ; // Posiciones (índices): // índice: 0 1 2 3 4 5 6 // valor: 4 3 2 7 8 3 1 Acceso a elementos: javascript console . log ( numeros [ 0 ] ) ; // 4 (primer elemento) console . log (...
Leer más

n-funcion - el botón-n

  En el botón: ¿QUIÉN ejecuta la función? javascript // TÚ escribes esto: const saludar = () => {     console . log ( "🔥 EJECUTANDO" ); }; // Le DICES al botón: "aquí tienes la función, tú ejecútala cuando hagan click" boton . addEventListener ( "click" , saludar ); //                           ↑ //                     Sin () - solo pasas la función // ¿QUIÉN ejecuta saludar() después? // ¡EL NAVEGADOR! Cuando el usuario hace click El navegador ejecuta por ti (como Express) javascript // Simulación de cómo funciona addEventListener internamente class Boton {      constructor () {          this . eventos = {};   // Donde guarda las funciones      }           // Este es addEventListener      cli...
Leer más

Objetos básicos en JavaScript

  1. Objetos en JavaScript Un objeto es como un contenedor que guarda datos (propiedades) y acciones (métodos/funciones). javascript // Creando un objeto vacío const miObjeto = {}; // Objeto con propiedades const persona = {      nombre : 'Juan' ,       // propiedad con valor string      edad : 30 ,           // propiedad con valor número      casado : false       // propiedad con valor boolean }; console . log ( persona . nombre );   // "Juan" console . log ( persona . edad );     // 30 2. Acceder a elementos de un objeto Hay dos formas de acceder: javascript const productoController = {      nombre : 'Controlador de Productos' ,      version : '1.0' }; // Forma 1: Notación de punto (la más común) console . log ( productoController . nombre );   // "Controlador de Productos" // Forma 2: Notación ...
Leer más