Dynamiczne generowanie listy w HTML
Treść zadania
W dokumencie znajduje się pusty kontener <div id="koszyk"></div>. Za pomocą właściwości innerHTML wstaw do wnętrza kontenera listę wypunktowaną zawierającą trzy elementy:
- Mysz optyczna
- Klawiatura mechaniczna
- Podkładka pod mysz
Kod powinien wygenerować znacznik <ul> z trzema znacznikami <li> w środku.
Co będzie oceniane
- Pobranie kontenera #koszyk.
- Wstawienie poprawnej struktury ul oraz trzech li przez innerHTML.
- Obecność trzech elementów li wewnątrz #koszyk.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (1)
- Wygenerowanie 3 elementów listy wewnątrz #koszyk — licznik #koszyk li = 3; tekst #koszyk li:first-child = Mysz optyczna
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Wstaw listę <ul> z 3 pozycjami <li> do #koszyk przez innerHTML
Wskazówki
Wskazówka 1
Zbuduj łańcuch znaków zawierający strukturę listy HTML: otwarcie znacznika listy, kolejne pozycje w znacznikach elementów listy oraz zamknięcie listy.
Wskazówka 2
Przypisz przygotowany kod do właściwości innerHTML kontenera o identyfikatorze koszyk.