¡Domina el uso de innerHTML en JavaScript!

  ¡Domina el uso de innerHTML en JavaScript!

¿Quieres modificar el contenido de tu página web dinámicamente? Con innerHTML, puedes insertar o cambiar HTML directamente desde JavaScript.

Ejemplo Básico

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

<h1>Mi primera página web</h1>
<p>Mi primer párrafo</p>

<p id="demo"></p>

<script>
  document.getElementById("demo").innerHTML = "<h2>¡Hola Mundo!</h2>";
</script>

</body>
</html>

🔍 ¿Qué está pasando aquí?

1️⃣ getElementById("demo") → Selecciona el elemento con id="demo".
2️⃣ .innerHTML → Reemplaza el contenido interno del elemento por el HTML que le asignes.
3️⃣ "<h2>¡Hola Mundo!</h2>" → El nuevo contenido que se insertará.

💡 ¿Para qué sirve?

✅ Modificar contenido (texto, imágenes, listas, etc.).
✅ Insertar elementos HTML completos (como <div>, <span>, etc.).
✅ Crear páginas dinámicas sin recargar.

⚠️ ¡Cuidado!

✖️ No uses innerHTML con contenido ingresado por usuarios (riesgo de XSS).
✖️ Sobrescribe todo el contenido interno del elemento.

🚀 ¿Quieres practicar?
Intenta cambiar el ejemplo para mostrar una lista (<ul>) en lugar de un <h2>.

¿Tienes dudas? ¡Pregunta en los comentarios! 👇

#JavaScript #WebDevelopment #Frontend #AprendeProgramando


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