Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Herausforderung: Hinzufügen und Entfernen von Elementen | DOM-Manipulation
Fortgeschrittene JavaScript-Meisterschaft
course content

Kursinhalt

Fortgeschrittene JavaScript-Meisterschaft

Fortgeschrittene JavaScript-Meisterschaft

1. Klassen
Willkommen Zum KursKlassendeklarationHerausforderung: Eine Klasse ErstellenKlassenmethodenHerausforderung: Methoden zu einer Klasse HinzufügenParameterobjektPrivate EigenschaftenHerausforderung: Implementierung Privater Properties in Einer KlasseGetter und SetterHerausforderung: Verwalten von Eigenschaften mit Getters und SettersStatische EigenschaftenStatische MethodenHerausforderung: Verwenden von Statischen Eigenschaften und Methoden in Einer KlasseVererbung mit Extends und Verwendung von Super()Herausforderung: Klassenvererbung mit extends und Verwendung von super
2. DOM-Manipulation
Was Ist das DOM?Abfragen des DOMHerausforderung: Abfragen des DOMVerstehen der DOM-HierarchieHerausforderung: DOM-HierarchieDOM-EigenschaftenArbeiten mit Element-AttributenHerausforderung: Arbeiten mit Element-Eigenschaften und -AttributenElemente HinzufügenElemente EntfernenHerausforderung: Hinzufügen und Entfernen von ElementenÄndern von ElementstilenHerausforderung: Ändern von Elementstilen
3. Ereignisse und Ereignisbehandlung
Einführung in Ereignisse und Ereignis-ListenerDas EreignisobjektHerausforderung: Ereignisse und Event-ListenerEreignisausbreitung und DelegierungHerausforderung: Ereignisausbreitung und DelegationTastatur- und MausereignisseVerwalten von Event-Listenern
4. Asynchrones JavaScript und APIs
Einführung in Asynchrones JavaScriptRückrufeVersprechenAsync/AwaitArbeiten mit APIsPraktische API-IntegrationHerausforderung: Arbeiten mit APIArbeiten Mit DrittanbieterbibliothekenHerausforderung: Arbeiten mit Drittanbieter-BibliothekenUmgang mit Mehreren Asynchronen Anfragen

book
Herausforderung: Hinzufügen und Entfernen von Elementen

Aufgabe

Sie bauen einen Einkaufswagen, in dem Benutzer Artikel hinzufügen und entfernen können.

  1. Einen Artikel zum Warenkorb hinzufügen:

    • Erstellen Sie ein neues <li>-Element;

    • Erstellen Sie ein neues <button>-Element;

    • Fügen Sie das neue <button>-Element dem neuen <li>-Element hinzu;

    • Fügen Sie ein neues <li>-Element zur <ul> mit der ID cart-list hinzu.

  2. Einen Artikel aus dem Warenkorb entfernen: Löschen Sie das spezifische <li>-Element aus der <ul>.

html

index.html

css

index.css

js

index.js

copy

  • Verwenden Sie createElement, um ein neues <li>-Element zu erstellen;

  • Verwenden Sie createElement, um ein neues <button>-Element zu erstellen;

  • Verwenden Sie appendChild, um das neue <button>-Element zum <li>-Element hinzuzufügen;

  • Verwenden Sie appendChild, um ein neues <li>-Element zur <ul> mit der ID cart-list hinzuzufügen;

  • Verwenden Sie removeChild, um das spezifische <li>-Element aus der <ul> zu löschen.

html

index.html

css

index.css

js

index.js

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 11

Fragen Sie AI

expand
ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

course content

Kursinhalt

Fortgeschrittene JavaScript-Meisterschaft

Fortgeschrittene JavaScript-Meisterschaft

1. Klassen
Willkommen Zum KursKlassendeklarationHerausforderung: Eine Klasse ErstellenKlassenmethodenHerausforderung: Methoden zu einer Klasse HinzufügenParameterobjektPrivate EigenschaftenHerausforderung: Implementierung Privater Properties in Einer KlasseGetter und SetterHerausforderung: Verwalten von Eigenschaften mit Getters und SettersStatische EigenschaftenStatische MethodenHerausforderung: Verwenden von Statischen Eigenschaften und Methoden in Einer KlasseVererbung mit Extends und Verwendung von Super()Herausforderung: Klassenvererbung mit extends und Verwendung von super
2. DOM-Manipulation
Was Ist das DOM?Abfragen des DOMHerausforderung: Abfragen des DOMVerstehen der DOM-HierarchieHerausforderung: DOM-HierarchieDOM-EigenschaftenArbeiten mit Element-AttributenHerausforderung: Arbeiten mit Element-Eigenschaften und -AttributenElemente HinzufügenElemente EntfernenHerausforderung: Hinzufügen und Entfernen von ElementenÄndern von ElementstilenHerausforderung: Ändern von Elementstilen
3. Ereignisse und Ereignisbehandlung
Einführung in Ereignisse und Ereignis-ListenerDas EreignisobjektHerausforderung: Ereignisse und Event-ListenerEreignisausbreitung und DelegierungHerausforderung: Ereignisausbreitung und DelegationTastatur- und MausereignisseVerwalten von Event-Listenern
4. Asynchrones JavaScript und APIs
Einführung in Asynchrones JavaScriptRückrufeVersprechenAsync/AwaitArbeiten mit APIsPraktische API-IntegrationHerausforderung: Arbeiten mit APIArbeiten Mit DrittanbieterbibliothekenHerausforderung: Arbeiten mit Drittanbieter-BibliothekenUmgang mit Mehreren Asynchronen Anfragen

book
Herausforderung: Hinzufügen und Entfernen von Elementen

Aufgabe

Sie bauen einen Einkaufswagen, in dem Benutzer Artikel hinzufügen und entfernen können.

  1. Einen Artikel zum Warenkorb hinzufügen:

    • Erstellen Sie ein neues <li>-Element;

    • Erstellen Sie ein neues <button>-Element;

    • Fügen Sie das neue <button>-Element dem neuen <li>-Element hinzu;

    • Fügen Sie ein neues <li>-Element zur <ul> mit der ID cart-list hinzu.

  2. Einen Artikel aus dem Warenkorb entfernen: Löschen Sie das spezifische <li>-Element aus der <ul>.

html

index.html

css

index.css

js

index.js

copy

  • Verwenden Sie createElement, um ein neues <li>-Element zu erstellen;

  • Verwenden Sie createElement, um ein neues <button>-Element zu erstellen;

  • Verwenden Sie appendChild, um das neue <button>-Element zum <li>-Element hinzuzufügen;

  • Verwenden Sie appendChild, um ein neues <li>-Element zur <ul> mit der ID cart-list hinzuzufügen;

  • Verwenden Sie removeChild, um das spezifische <li>-Element aus der <ul> zu löschen.

html

index.html

css

index.css

js

index.js

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 11
Wir sind enttäuscht, dass etwas schief gelaufen ist. Was ist passiert?
some-alt