Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Uitdaging: DOM-Elementen Toevoegen en Verwijderen | DOM-Manipulatie voor Interactieve Webontwikkeling
Geavanceerde JavaScript-Beheersing

bookUitdaging: DOM-Elementen Toevoegen en Verwijderen

Taak

Je bouwt een winkelwagen waarin gebruikers items kunnen toevoegen en verwijderen.

  1. Voeg een item toe aan de winkelwagen:
    • Maak een nieuw <li>-element aan;
    • Maak een nieuw <button>-element aan;
    • Voeg het nieuwe <button>-element toe aan het nieuwe <li>-element;
    • Voeg het nieuwe <li>-element toe aan de <ul> met de ID cart-list.
  2. Verwijder een item uit de winkelwagen: Verwijder het specifieke <li>-element uit de <ul>.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Gebruik createElement om een nieuw <li>-element aan te maken;
  • Gebruik createElement om een nieuw <button>-element aan te maken;
  • Gebruik appendChild om het nieuwe <button>-element toe te voegen aan het <li>-element;
  • Gebruik appendChild om het nieuwe <li>-element toe te voegen aan de <ul> met de ID cart-list;
  • Gebruik removeChild om het specifieke <li>-element uit de <ul> te verwijderen.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 11

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 2.22

bookUitdaging: DOM-Elementen Toevoegen en Verwijderen

Veeg om het menu te tonen

Taak

Je bouwt een winkelwagen waarin gebruikers items kunnen toevoegen en verwijderen.

  1. Voeg een item toe aan de winkelwagen:
    • Maak een nieuw <li>-element aan;
    • Maak een nieuw <button>-element aan;
    • Voeg het nieuwe <button>-element toe aan het nieuwe <li>-element;
    • Voeg het nieuwe <li>-element toe aan de <ul> met de ID cart-list.
  2. Verwijder een item uit de winkelwagen: Verwijder het specifieke <li>-element uit de <ul>.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Gebruik createElement om een nieuw <li>-element aan te maken;
  • Gebruik createElement om een nieuw <button>-element aan te maken;
  • Gebruik appendChild om het nieuwe <button>-element toe te voegen aan het <li>-element;
  • Gebruik appendChild om het nieuwe <li>-element toe te voegen aan de <ul> met de ID cart-list;
  • Gebruik removeChild om het specifieke <li>-element uit de <ul> te verwijderen.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 11
some-alt