Creando elementos usando el DOM

Introduction to programming (Web)

Docente: Mr. Norman Trujillo

ntrujillo@csa.edu.ni

Pregunta esencial

¿Cómo permite el DOM que JavaScript genere contenido nuevo en una página web de manera dinámica, como si se estuviera construyendo en vivo?

Objetivos de aprendizaje

Crear nuevos elementos HTML mediante document.createElement.
Añadir los elementos creados a la estructura existente de la página web utilizando métodos como appendChild.

La magia de la web dinámica

Hasta ahora hemos modificado lo que ya existe. Hoy aprenderemos a ser arquitectos que crean ladrillos desde la nada para hacer que la web crezca y se transforme frente a nuestros ojos.

Reflexiona y comparte

Imagina tu red social favorita. Cuando deslizas hacia abajo y aparecen nuevos mensajes o publicaciones...

¿Crees que esos elementos ya estaban ahí escondidos o se crean en ese preciso momento?

Recordando la estructura del DOM

document

html

head

body

Hoy añadiremos nuevas ramas a este árbol de forma dinámica.

Web estática

Todo el código HTML se escribe antes de que la página cargue. Nada cambia por sí solo.

Web dinámica

JavaScript actúa como un obrero que construye, borra y mueve partes de la página mientras el usuario la usa.

El artesano y la arcilla

Piensa en document.createElement como el momento en que un artesano moldea arcilla para formar una figura nueva. Todavía no está en el estante de la tienda, pero la pieza ya existe en sus manos.

document.createElement()

Este método crea un nodo de elemento HTML especificado por su nombre de etiqueta.

// Sintaxis básica

let nuevoElemento = document.createElement("tag");

¿Qué podemos crear?

"p"

Párrafos

"button"

Botones

"div"

Contenedores

"h1"

Títulos

"img"

Imágenes

"li"

Listas

Paso 1: Fabricar el elemento

let parrafo = document.createElement("p");

En este punto, el navegador sabe que existe un párrafo en memoria, pero todavía no aparece en la pantalla.

<p></p>

El elemento está flotando

Como una astronauta fuera de su nave, el elemento existe pero no está conectado a nada. Necesitamos darle contenido y una "casa".

Paso 2: Darle personalidad (Contenido)

.textContent

Inserta solo texto plano. Es más seguro y rápido.

p.textContent = "Hola mundo";

.innerHTML

Permite insertar etiquetas HTML dentro del elemento.

p.innerHTML = "<b>Hola</b> mundo";

Combinando los pasos

// 1. Creamos el elemento
let mensaje = document.createElement("p");

// 2. Le ponemos contenido
mensaje.textContent = "¡Estoy aprendiendo DOM!";

¿Ya se ve en la página? ¡Aún no!

La importancia del "Padre"

En el DOM, cada elemento debe ser "hijo" de alguien. Para que sea visible, debemos decidir dentro de qué contenedor lo vamos a meter.

appendChild()

Este método añade un nodo al final de la lista de hijos de un nodo padre especificado.

padre.appendChild(hijo);

Paso 3: Insertar en la página

let parrafo = document.createElement("p");
parrafo.textContent = "¡Aparecí mágicamente!";

// Lo añadimos al body de la página
document.body.appendChild(parrafo);

¡Ahora sí es visible para el usuario!

Análisis de la estructura

1

document.createElement("p") -> Crea el objeto.

2

parrafo.textContent = "..." -> Define el interior.

3

document.body.appendChild(...) -> Lo conecta al DOM.

¡Manos a la obra!

Abran un archivo HTML básico. Usando solo JavaScript, creen un h1 que diga su nombre y añádanlo al final del cuerpo del documento.

Reto: 3 minutos

Más allá del texto: Botones

Podemos crear elementos interactivos. Un botón no solo necesita texto, también puede necesitar estilos o identificadores.

Botón Nuevo

Ejemplo: Botón Personalizado

let textoUsuario = prompt("¿Qué quieres que diga tu botón?");
let boton = document.createElement("button");

// Asignamos el texto del prompt al botón
boton.innerHTML = textoUsuario;

// Lo insertamos en un div específico
document.getElementById("button-box").appendChild(boton);

¿Qué está pasando aquí?

prompt: Obtiene datos del usuario en tiempo real.
innerHTML: Define lo que vemos dentro del botón.
getElementById: Busca un contenedor específico en lugar de usar todo el body.

insertBefore()

¿Qué pasa si no quiero el elemento al final? Este método permite insertar un nodo ANTES de un nodo de referencia.

padre.insertBefore(nuevo, referencia);

Entendiendo los argumentos

nuevo: El elemento que acabamos de crear.

referencia: El elemento existente delante del cual queremos poner el nuevo.

Duelo de métodos

appendChild

Va siempre a la cola.

insertBefore

Se cuela en la fila.

Visualizando familias en el DOM

Un contenedor div puede ser padre de muchos p al mismo tiempo.

<div id="paragraphs">
  <p>Párrafo 1</p>
  <p>Párrafo 2</p>
  <p>Párrafo 3</p>
</div>

JavaScript puede acceder a todos estos hijos usando .children.

Depuración en vivo

Usar console.log() nos permite ver si nuestros elementos se crearon correctamente antes de que nos volvamos locos buscando errores visuales.

> console.log(parrafo.innerHTML);

Actividad: Pasar lista

Tenemos una lista de estudiantes en el HTML. Tu tarea es añadirte al final de la lista usando únicamente JavaScript.

Karel the Dog
Tracy the Turtle
Jeremy the Human
¿Tú?

Solución: Paso 1

// 1. Crear el ítem de lista
let item = document.createElement("li");
item.innerHTML = "Tu Nombre";

// 2. Obtener la lista existente
let lista = document.getElementById("class-list");
lista.appendChild(item);

Solución: Paso 2 (insertBefore)

Añadir un encabezado "CodeHS Class" ANTES de la lista:

let encabezado = document.createElement("h4");
encabezado.innerHTML = "CodeHS Class:";

let ventana = document.getElementById("class-window");
ventana.insertBefore(encabezado, lista);

El Desafío Maestro

Usando solo JavaScript, añade una tarea pendiente a tu calendario de quehaceres.

Nivel Experto: Crear una fila completa de tabla

Cómo crear una fila completa

tr

td

td

td...

Crear el elemento tr.
Usar un bucle para crear 5 td.
Añadir cada td al tr usando appendChild.
Añadir el tr a la tabla.

Ojo de detective

Aunque no lo escribas en HTML, el navegador suele meter las filas (tr) dentro de un elemento invisible llamado tbody.

¡Verifícalo inspeccionando el código en tu navegador!

Aplicaciones reales

Feeds Infinitos

Nuevos posts en Instagram o TikTok se crean dinámicamente al deslizar.

Sistemas de Chat

Cada mensaje que envías crea un nuevo globo de texto en el DOM.

Carritos de Compra

Añadir un producto a la lista sin recargar la página entera.

Notificaciones

Alertas que aparecen y desaparecen según las acciones.

Resumen de herramientas

Método	Propósito
createElement()	Fabrica una nueva etiqueta.
appendChild()	Añade al final de un padre.
insertBefore()	Añade antes de un elemento guía.

¡Cuidado con estos errores!

Olvidar el appendChild: Creas el elemento pero nunca lo metes en la página. ¡Invisible!

Usar etiquetas mal escritas: createElement("parrafo") en lugar de "p".

No usar comillas: createElement(p) tratará p como una variable, no como una etiqueta.

¿Cómo se siente ser el creador?

Ahora que sabes que puedes hacer que aparezca cualquier cosa en una pantalla con solo unas líneas de código...

¿Cuál es la interfaz más increíble que te gustaría construir?

Tarea para la próxima sesión

Crear una lista dinámica:

Crea un archivo HTML con un contenedor vacío.
Genera al menos dos elementos nuevos (párrafo y botón).
Insértalos en la página usando createElement y appendChild.
Incluye comentarios en tu código explicando cada paso.

Preguntas

No hay dudas pequeñas cuando se trata de construir el futuro de la web.

¡Gracias!

Mr. Norman Trujillo

ntrujillo@csa.edu.ni

Creando elementos usando el DOM

Dominando el DOM Dinámico Slides

Creando el DOM Guía Práctica

Similar Lessons

El Poder de JavaScript en HTML

Norman René Trujillo Zapata

Earth Systems Review

Monique Milligan

Earth Systems Review

Monique Milligan

Detective Quest: The Missing Phone

Priyadarshini Bharath

The Viral Broadcast

Andrew Tarara

BandLab Beatmaker

Andrew Tarara

Paper to Playlist

Andrew Tarara

The Sound of Science

Andrew Tarara

Growth Celebration Flyers

Lydia McCracken

Earth Systems Review

Monique Milligan

Systems and Stability

Austin WIllis

Cell Energy Cycle

Austin WIllis

Life Layers

Tricia Lucie

Particle Power

Archie Olson

Mass Never Vanishes

Archie Olson

Invisible Ingredients

Archie Olson

Planet Boiler

dquintiliani

Oxygen Delivery Systems

Austin WIllis

Green Reactions

Priyadarshini Bharath

Celestial Cycles

tjobrien

Usando el DOM

Norman René Trujillo Zapata

Magia con el DOM

Norman René Trujillo Zapata

Gas Exchange Cycle

Austin WIllis

Usando el DOM

Norman René Trujillo Zapata

Creando elementos usando el DOM

Norman René Trujillo Zapata

Object Overload

malane

Earth Sculptors

Ariadne Reuben Polinar