JavaScript - DHTML, standard w3c DOM, dodawanie elementów, tworzenie elementów, usuwanie elementów, formularze
| DZIAŁANIE: |
Kod:
Ewentualne Objaśnienia:
W poprzednim przykładzie pokazałem jak wstawić nowy element do strony, wstawiany element pojawiał się na końcu strony (jako ostatni nowy element potomny body). Tutaj pokazuje jak wstawić go sobie nowy element w dowolne miejsce na stronie. Potrzebna nam jest do tego metoda insertBefore gdzie jako parametry podajemy nowy element, oraz ten przed którym ma on zostać wstawiony.
Mamy tutaj prosty formularz i zależnie od tego co użytkownik wybierze w
przycisku radio (tzn. który) to pojawia się nowe pole formularza, albo znika.
Jest to bardzo prosto zrobione zobaczmy mniej więcej :
- jak wiadomo w momencie kliknięcia danego przycisku radio wywoływana jest
odpowiednia funkcja JS
- funkcja do dodawania nowego pola:
- tworzymy dwa nowe elementy div oraz input, ustawiamy dla
nich odpowiednie atrybuty
- dla naszego nowego diva tworzymy elementy potomne czyli
pole tekstowe, węzeł tekstowy, znacznik br
- odczytujemy sobie nasz formularz oraz pole tekstowe o id
"telefon"
- wstawiamy przez insertBefore do formularza naszego
diva, zaraz przed pole tekstowe 'z telefonem'
- usuwanie pola (a raczej diva) :
- pobieramy sobie naszego diva, pobieramy formularz i poprzez
metodę usuwającą element potomny czyli removeChild usuwamy naszego diva