Génération dynamique de contenu avec des données
Combinez les attributs de données avec jQuery pour créer des composants interactifs, mettre à jour l’interface selon les données stockées et construire des affichages de contenu flexibles.
Génération dynamique de contenu avec des données est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.
Contenu dynamique avec des données
Bienvenue dans la leçon 2 ! Dans la leçon précédente, nous avons appris à stocker et à récupérer des données à l'aide des attributs de données HTML5.
À présent, nous allons aller plus loin. Nous allons découvrir comment combiner ces attributs avec jQuery pour générer et mettre à jour dynamiquement du contenu sur vos pages web. Vos interfaces utilisateur deviennent ainsi interactives et flexibles !
Pourquoi du contenu dynamique ?
Imaginez que vous disposiez d'une liste de produits, de profils utilisateur ou d'articles d'actualité. Au lieu de tout coder en dur, vous pouvez définir des données de base à l'aide des attributs data-*.
- Mettre à jour des éléments existants avec de nouvelles informations.
- Créer des éléments entièrement nouveaux à partir de données.
- Contrôler le comportement de l'interface utilisateur (par exemple, afficher ou masquer des éléments) à l'aide de données.
Cette approche sépare les données de votre contenu de leur présentation.
Mettre à jour des éléments existants
Commençons par mettre à jour le contenu. Nous pouvons disposer d'un élément avec des attributs data-* et utiliser jQuery pour lire ces données et remplir d'autres parties de la page.
C'est très utile pour afficher les détails d'un élément sélectionné ou mettre à jour des messages d'état.
Code : mettre à jour les détails d'un élément
Cliquez sur le bouton pour voir comment les attributs de données d'un élément peuvent mettre à jour le texte d'un autre élément.
<!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>Explication : mettre à jour le contenu
Dans cet exemple, la div #productCard contient data-product-name et data-product-price.
- Lorsque vous cliquez sur le bouton,
.data('productName')et.data('productPrice')récupèrent ces valeurs. .text()est ensuite utilisé pour insérer ces valeurs dans les éléments#displayedNameet#displayedPrice.
Cela montre comment lire des données à partir d'un élément et mettre à jour le contenu d'un autre.
Créer de nouveaux éléments
Au-delà de la mise à jour, nous pouvons également utiliser les attributs de données pour générer des éléments HTML entièrement nouveaux. Cette technique est particulièrement puissante pour les listes, les galeries ou les formulaires dynamiques.
Vous pouvez stocker dans des attributs de données des données semblables à un modèle ou une configuration pour de nouveaux éléments, puis utiliser jQuery pour les construire et les insérer dans le DOM.
Code : ajouter un élément à une liste
Cliquez sur le bouton ci-dessous pour ajouter dynamiquement un nouvel élément de liste, dont le contenu provient des attributs de données du bouton.
<!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>Explication : créer des éléments
Ici, le bouton #addBtn possède les attributs data-new-item-text et data-new-item-value.
- Lors du clic, nous récupérons ces valeurs.
$('crée un nouvel élément de liste.- ')
.text()le remplit avec les données combinées.- Enfin,
$('#myList').append(newItem)ajoute ce nouvel élémentà notre liste non ordonnée.
C'est un modèle fondamental pour créer des listes ou des grilles dynamiques !
Composants interactifs avec des données
Les attributs de données ne servent pas uniquement au texte ! Ils peuvent également stocker la configuration de composants interactifs : par exemple, l'élément à afficher ou masquer, ou l'animation à jouer.
Cela découple votre logique JavaScript des identifiants ou classes codés en dur, ce qui rend votre code plus modulaire et réutilisable.
Question : contenu dynamique
Examinez le code HTML et jQuery suivant :
<div id="infoBox" data-status="active"></div>
$('#infoBox').data('status', 'inactive');
Quelle sera la nouvelle valeur de l'attribut data-status lorsqu'il sera récupéré avec $('#infoBox').data('status') après l'exécution de ce code ?
Récapitulatif : contenu dynamique avec des données
Excellent travail ! Dans cette leçon, vous avez appris à exploiter les attributs de données pour créer du contenu web véritablement dynamique :
- Vous pouvez mettre à jour des éléments existants en lisant les attributs de données et en insérant leurs valeurs.
- Vous pouvez générer dynamiquement de nouveaux éléments HTML et les remplir avec des données provenant d'autres éléments.
- Cette approche rend votre interface utilisateur plus flexible et interactive en séparant les données de leur présentation.
Vous êtes maintenant prêt à créer des interfaces utilisateur plus adaptables et attrayantes !
Questions Fréquemment Posées
La leçon « Génération dynamique de contenu avec des données » est-elle gratuite ?
Oui — le texte complet de « Génération dynamique de contenu avec des données » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Génération dynamique de contenu avec des données » ?
Combinez les attributs de données avec jQuery pour créer des composants interactifs, mettre à jour l’interface selon les données stockées et construire des affichages de contenu flexibles. Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer jQuery Academy ?
Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 3.
Combien de temps prend la leçon « Génération dynamique de contenu avec des données » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?
Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Exploitation des attributs de données HTML5
- Génération dynamique de contenu avec des données
- Intégration de base de modèles côté client