0Pricing
jQuery Academy · Lección

Generación dinámica de contenido con datos

Combine atributos de datos con jQuery para crear componentes interactivos, actualizar la interfaz de usuario según los datos almacenados y construir presentaciones de contenido flexibles.

Generación dinámica de contenido con datos es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 3 lecciones en total.

Contenido dinámico con datos

¡Bienvenido a la lección 2! En la lección anterior, aprendimos a almacenar y recuperar datos mediante atributos de datos de HTML5.

Ahora iremos un paso más allá. Exploraremos cómo combinar estos atributos con jQuery para generar y actualizar contenido dinámicamente en sus páginas web. ¡Esto hace que sus interfaces de usuario sean interactivas y flexibles!

¿Por qué usar contenido dinámico?

Imagine que tiene una lista de productos, perfiles de usuario o artículos de noticias. En lugar de codificarlo todo directamente, puede definir los datos básicos mediante atributos data-*.

  • Actualizar elementos existentes con información nueva.
  • Crear elementos completamente nuevos a partir de datos.
  • Controlar el comportamiento de la interfaz (por ejemplo, mostrar u ocultar elementos) mediante datos.

Este enfoque separa los datos del contenido de su presentación.

Actualizar elementos existentes

Empecemos por actualizar contenido. Podemos tener un elemento con atributos data-* y usar jQuery para leer esos datos y completar otras partes de la página.

Esto resulta ideal para mostrar detalles sobre un elemento seleccionado o actualizar mensajes de estado.

Código: actualizar los detalles de un elemento

Pruebe a hacer clic en el botón para ver cómo los atributos de datos de un elemento pueden actualizar el texto de otro.

<!DOCTYPE html>
<html>
<head>
  <title>Update Content</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<div id="productCard" data-product-name="CoddyKit Pro" data-product-price="29.99">
  <p>Product: <span id="displayedName">[Name Here]</span></p>
  <p>Price: <span id="displayedPrice">[Price Here]</span></p>
  <button id="showDetailsBtn">Show Details</button>
</div>

<script>
$(document).ready(function() {
  $('#showDetailsBtn').on('click', function() {
    var name = $('#productCard').data('productName');
    var price = $('#productCard').data('productPrice');
    
    $('#displayedName').text(name);
    $('#displayedPrice').text('$' + price);
  });
});
</script>

</body>
</html>

Explicación: actualizar contenido

En el ejemplo, el elemento div #productCard contiene data-product-name y data-product-price.

  • Al hacer clic en el botón, .data('productName') y .data('productPrice') recuperan estos valores.
  • A continuación, .text() se utiliza para insertar estos valores en los elementos span #displayedName y #displayedPrice.

Esto muestra cómo leer datos de un elemento y actualizar el contenido de otro.

Crear elementos nuevos

Además de actualizar elementos, también podemos usar atributos de datos para generar elementos HTML completamente nuevos. Esto resulta muy útil para listas, galerías o formularios dinámicos.

Puede almacenar en atributos de datos información similar a una plantilla o la configuración de nuevos elementos y, después, usar jQuery para construirlos e insertarlos en el DOM.

Código: añadir un elemento a una lista

Haga clic en el botón de abajo para añadir dinámicamente un nuevo elemento a la lista, cuyo contenido se obtiene de los atributos de datos del botón.

<!DOCTYPE html>
<html>
<head>
  <title>Create New Element</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<ul id="myList">
  <li>Existing Item 1</li>
</ul>

<button id="addBtn" data-new-item-text="Dynamic Item" data-new-item-value="101">
  Add Dynamic Item
</button>

<script>
$(document).ready(function() {
  $('#addBtn').on('click', function() {
    var itemText = $(this).data('newItemText');
    var itemValue = $(this).data('newItemValue');
    
    var newItem = $('<li>').text(itemText + ' (ID: ' + itemValue + ')');
    $('#myList').append(newItem);
  });
});
</script>

</body>
</html>

Explicación: crear elementos

Aquí, el botón #addBtn tiene los atributos data-new-item-text y data-new-item-value.

  • Al hacer clic, recuperamos estos valores.
  • $('
  • ') crea un nuevo elemento de la lista.
  • .text() lo completa con los datos combinados.
  • Por último, $('#myList').append(newItem) añade este nuevo elemento
  • a nuestra lista desordenada.

¡Este es un patrón fundamental para crear listas o cuadrículas dinámicas!

Componentes interactivos con datos

¡Los atributos de datos no sirven únicamente para texto! También pueden almacenar la configuración de componentes interactivos. Por ejemplo, qué elemento alternar o qué animación reproducir.

Esto desacopla la lógica de JavaScript de los identificadores o las clases codificados directamente, lo que hace que su código sea más modular y reutilizable.

Pregunta: contenido dinámico

Considere el siguiente código HTML y jQuery:

<div id="infoBox" data-status="active"></div>

$('#infoBox').data('status', 'inactive');

¿Cuál será el nuevo valor del atributo data-status al recuperarlo mediante $('#infoBox').data('status') después de ejecutar este código?

Repaso: contenido dinámico con datos

¡Excelente trabajo! En esta lección, aprendió a aprovechar los atributos de datos para crear contenido web verdaderamente dinámico:

  • Puede actualizar elementos existentes leyendo los atributos de datos e insertando sus valores.
  • Puede generar nuevos elementos HTML dinámicamente y completarlos con datos de otros elementos.
  • Este enfoque hace que su interfaz sea más flexible e interactiva al separar los datos de la presentación.

¡Ya está preparado para crear interfaces de usuario más adaptables y atractivas!

Preguntas frecuentes

¿La lección «Generación dinámica de contenido con datos» es gratis?

Sí — el texto completo de «Generación dinámica de contenido con datos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Generación dinámica de contenido con datos»?

Combine atributos de datos con jQuery para crear componentes interactivos, actualizar la interfaz de usuario según los datos almacenados y construir presentaciones de contenido flexibles. Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar jQuery Academy?

No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.

¿Cuánto tiempo toma la lección «Generación dinámica de contenido con datos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?

Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Uso de los atributos de datos de HTML5
  2. Generación dinámica de contenido con datos
  3. Integración básica de plantillas del lado del cliente
← Volver a jQuery Academy