jQuery Academy · Lektion

Dynamische Inhaltsgenerierung mit Daten

Dynamische Inhaltsgenerierung mit Daten ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Dynamische Inhalte mit Daten

Willkommen zu Lektion 2! In der vorherigen Lektion haben wir gelernt, wie sich Daten mithilfe von HTML5-Datenattributen speichern und abrufen lassen.

Nun gehen wir einen Schritt weiter. Wir sehen uns an, wie Sie diese Attribute mit jQuery kombinieren können, um Inhalte auf Ihren Webseiten dynamisch zu erzeugen und zu aktualisieren. Dadurch werden Ihre Benutzeroberflächen interaktiv und flexibel!

Warum dynamische Inhalte?

Stellen Sie sich vor, Sie haben eine Liste mit Produkten, Benutzerprofilen oder Nachrichtenartikeln. Anstatt alles fest zu codieren, können Sie grundlegende Daten mithilfe von data-*-Attributen definieren.

Aktualisieren Sie vorhandene Elemente mit neuen Informationen.
Erstellen Sie vollständig neue Elemente auf Grundlage von Daten.
Steuern Sie das Verhalten der Benutzeroberfläche (z. B. das Ein- und Ausblenden) mithilfe von Daten.

Bei diesem Ansatz werden Ihre Inhaltsdaten von ihrer Darstellung getrennt.

Vorhandene Elemente aktualisieren

Beginnen wir mit dem Aktualisieren von Inhalten. Wir können ein Element mit data-*-Attributen versehen und jQuery verwenden, um diese Daten auszulesen und andere Teile der Seite damit zu befüllen.

Das eignet sich hervorragend, um Details zu einem ausgewählten Element anzuzeigen oder Statusmeldungen zu aktualisieren.

Code: Elementdetails aktualisieren

Klicken Sie auf die Schaltfläche, um zu sehen, wie Datenattribute eines Elements den Text eines anderen Elements aktualisieren können.

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

Erklärung: Inhalte aktualisieren

Im Beispiel enthält das #productCard-Div data-product-name und data-product-price.

Beim Klicken auf die Schaltfläche rufen .data('productName') und .data('productPrice') diese Werte ab.
Anschließend wird .text() verwendet, um diese Werte in die Spans #displayedName und #displayedPrice einzufügen.

Dies zeigt, wie Sie Daten aus einem Element auslesen und den Inhalt eines anderen Elements aktualisieren.

Neue Elemente erstellen

Neben dem Aktualisieren können wir Datenattribute auch verwenden, um vollständig neue HTML-Elemente zu erzeugen. Das ist besonders nützlich für Listen, Galerien oder dynamische Formulare.

Sie können vorlagenähnliche Daten oder Konfigurationen für neue Elemente in Datenattributen speichern und anschließend jQuery verwenden, um diese Elemente zu erstellen und in das DOM einzufügen.

Code: Element zur Liste hinzufügen

Klicken Sie auf die Schaltfläche unten, um dynamisch ein neues Listenelement hinzuzufügen, dessen Inhalt aus den Datenattributen der Schaltfläche abgeleitet wird.

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

Erklärung: Elemente erstellen

Hier besitzt die Schaltfläche #addBtn die Attribute data-new-item-text und data-new-item-value.

Beim Klicken rufen wir diese Werte ab.
$('
') erstellt ein neues Listenelement.
.text() befüllt es mit den kombinierten Daten.
Zum Schluss fügt $('#myList').append(newItem) dieses neue
zu unserer ungeordneten Liste hinzu.

Dies ist ein grundlegendes Muster zum Erstellen dynamischer Listen oder Raster!

Interaktive Komponenten mit Daten

Datenattribute sind nicht nur für Text gedacht! Sie können auch Konfigurationen für interaktive Komponenten speichern, beispielsweise welches Element ein- oder ausgeblendet werden soll oder welche Animation abgespielt wird.

Dadurch wird Ihre JavaScript-Logik von fest codierten IDs oder Klassen entkoppelt, sodass Ihr Code modularer und wiederverwendbar wird.

Frage: Dynamische Inhalte

Betrachten Sie den folgenden HTML- und jQuery-Code:

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

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

Welchen neuen Wert hat das Attribut data-status, wenn es nach der Ausführung dieses Codes mit $('#infoBox').data('status') abgerufen wird?

Rückblick: Dynamische Inhalte mit Daten

Sehr gut! In dieser Lektion haben Sie gelernt, Datenattribute zu nutzen, um wirklich dynamische Webinhalte zu erstellen:

Sie können vorhandene Elemente aktualisieren, indem Sie Datenattribute auslesen und ihre Werte einfügen.
Sie können neue HTML-Elemente dynamisch erzeugen und sie mit Daten aus anderen Elementen befüllen.
Dieser Ansatz macht Ihre Benutzeroberfläche flexibler und interaktiver, da Daten und Darstellung voneinander getrennt werden.

Nun sind Sie bereit, anpassungsfähigere und ansprechendere Benutzeroberflächen zu erstellen!

Häufig gestellte Fragen

Ist die Lektion „Dynamische Inhaltsgenerierung mit Daten“ kostenlos?

Ja — der vollständige Text von „Dynamische Inhaltsgenerierung mit Daten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Dynamische Inhaltsgenerierung mit Daten“?

Kombinieren Sie Datenattribute mit jQuery, um interaktive Komponenten zu erstellen, die Benutzeroberfläche anhand gespeicherter Daten zu aktualisieren und flexible Inhaltsdarstellungen zu entwickeln. Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um jQuery Academy zu starten?

Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.

Wie lange dauert die Lektion „Dynamische Inhaltsgenerierung mit Daten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?

Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

HTML5-Datenattribute nutzen
Dynamische Inhaltsgenerierung mit Daten
Grundlagen der clientseitigen Template-Integration

← Zurück zu jQuery Academy