Tworzenie i dodawanie elementu li do listy
Treść zadania
W dokumencie znajduje się lista <ul id="listaZakupow"></ul>, pole tekstowe <input type="text" id="nowyTowar" value="Chleb"> oraz przycisk <button id="btnDodaj">Dodaj towar</button>. Napisz skrypt, który po kliknięciu przycisku utworzy nowy element <li> metodą document.createElement('li'), ustawi jego zawartość tekstową na wartość pola i dołączy go do listy za pomocą appendChild().
Co będzie oceniane
- Użycie document.createElement('li').
- Pobranie wartości z pola #nowyTowar.
- Dołączenie elementu metodą appendChild do #listaZakupow.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (1)
- Dodanie nowego elementu li z tekstem Chleb — licznik #listaZakupow li = 1; tekst #listaZakupow li:last-child = Chleb
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Utwórz element li z tekstem z pola #nowyTowar i dodaj do #listaZakupow po kliknięciu #btnDodaj
Wskazówki
Wskazówka 1
Skorzystaj z metody fabrycznej tworzącej nowe węzły w drzewie DOM, a następnie podepnij go do listy za pomocą metody wstawiania na koniec kontenera.
Wskazówka 2
W obsłudze kliknięcia utwórz nowy element listy, przypisz do jego właściwości treści tekstowej wartość odczytaną z pola wejściowego i wywołaj na elemencie listy zakupów metodę dodającą nowe dziecko.