jQuery Academy · Lesson

Dynamic Content Generation with Data

Combine data attributes with jQuery to create interactive components, update UI based on stored data, and build flexible content displays.

Dynamic Content Generation with Data is a free jQuery Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the jQuery Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Dynamic Content with Data

Welcome to Lesson 2! In the previous lesson, we learned how to store and retrieve data using HTML5 data attributes.

Now, we'll take it a step further. We'll explore how to combine these attributes with jQuery to dynamically generate and update content on your web pages. This makes your UIs interactive and flexible!

Why Dynamic Content?

Imagine you have a list of products, user profiles, or news articles. Instead of hardcoding everything, you can define basic data using data-* attributes.

Update existing elements with new info.
Create entirely new elements based on data.
Control UI behavior (like showing/hiding) using data.

This approach separates your content data from its presentation.

Updating Existing Elements

Let's start by updating content. We can have an element with data-* attributes and use jQuery to read that data and populate other parts of the page.

This is great for displaying details about a selected item or updating status messages.

Code: Update Item Details

Try clicking the button to see how data attributes from one element can update text in another.

<!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>

Explanation: Updating Content

In the example, the #productCard div holds data-product-name and data-product-price.

When the button is clicked, .data('productName') and .data('productPrice') retrieve these values.
.text() is then used to inject these values into the #displayedName and #displayedPrice spans.

This shows how to read data from one element and update the content of another.

Creating New Elements

Beyond updating, we can also use data attributes to generate entirely new HTML elements. This is super powerful for lists, galleries, or dynamic forms.

You can store template-like data or configuration for new elements in data attributes, then use jQuery to construct and insert them into the DOM.

Code: Add Item to List

Click the button below to dynamically add a new list item, whose content is derived from the button's data attributes.

<!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>

Explanation: Creating Elements

Here, the button #addBtn has data-new-item-text and data-new-item-value.

On click, we retrieve these values.
$('
') creates a new list item element.
.text() populates it with the combined data.
Finally, $('#myList').append(newItem) adds this new
to our unordered list.

This is a fundamental pattern for building dynamic lists or grids!

Interactive Components with Data

Data attributes aren't just for text! They can also store configuration for interactive components. For example, which element to toggle, or what animation to play.

This decouples your JavaScript logic from hardcoded IDs or classes, making your code more modular and reusable.

Question: Dynamic Content

Consider the following HTML and jQuery code:

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

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

What will the new value of the data-status attribute be when retrieved using $('#infoBox').data('status') after this code runs?

Recap: Dynamic Content with Data

Great job! In this lesson, you learned how to leverage data attributes to create truly dynamic web content:

You can update existing elements by reading data attributes and injecting their values.
You can generate new HTML elements dynamically, populating them with data from other elements.
This approach makes your UI more flexible and interactive by separating data from presentation.

You're now ready to build more adaptable and engaging user interfaces!

Frequently asked questions

Is the “Dynamic Content Generation with Data” lesson free?

Yes — the full text of “Dynamic Content Generation with Data” is free to read here on the web, and the jQuery Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the jQuery Academy course, upgrade to CoddyKit PRO.

What will I learn in “Dynamic Content Generation with Data”?

Combine data attributes with jQuery to create interactive components, update UI based on stored data, and build flexible content displays. You practise jQuery Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start jQuery Academy?

No prior experience is required. jQuery Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Dynamic Content Generation with Data” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this jQuery Academy lesson?

Yes. Every jQuery Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

Leveraging HTML5 Data Attributes
Dynamic Content Generation with Data
Basic Client-Side Templating Integration

← Back to jQuery Academy