JavaScript: Wstawianie i usuwanie elementów ze strony

0:00W tej lekcji pokażę Ci jak utworzone elementy można wstawiać na stronę, czyli

0:04wreszcie zobaczysz jak z poziomu języka JavaScript możemy modyfikować ten

0:08obiektowy model dokumentu, czyli tak naprawdę wyświetlać coś na stronie.

0:14Mamy takie dwa elementy ul z identyfikatorem list 1 i list 2.

0:18Na nich się będziemy chcieli skupić, więc najpierw będę chciał się odwołać do tego

0:21list 1, czyli po prostu znaleźć ten element.

0:25Zapiszemy sobie go w jakiejś stałej. Nazwiemy to np.

0:27list 1 i document.querySelector po identyfikatorze list 1

0:34znaleźliśmy ten element. I teraz chciałbym

0:36utworzyć nowy element li i wstawić go tutaj na koniec.

0:41Więc jak widzisz, wygląda to tutaj w

0:43następujący sposób, tak samo jak widzieliśmy to na stronie w drzewie DOM

0:47i za tym elementem będę chciał wstawić nowy element. Dlatego utworzę sobie taki

0:51nowy element, stałą nazwę li i tak jak w lekcji poprzedniej pokazywałem

0:55za pomocą createElement utworzymy sobie element li.

0:59Czyli mamy już taki element, ale on na razie nie ma również żadnego tekstu.

1:03Zatem utworzę sobie jeszcze taką stałą tekst

1:06i tak jak w poprzedniej lekcji Ci

1:07pokazywałem, zrobimy createTextNode i wpiszemy sobie tutaj np. treść.

1:15Potem jeszcze w tym kursie pokażę Ci, jak

1:16w trochę łatwiejszy sposób można zarządzać treścią danego elementu

1:20ale na razie chcę Ci pokazać, że taki TextNode to również jest pełnoprawny obiekt,

1:24który możemy przekazać do metody, którą właśnie teraz wywołam.

1:29Będzie to metoda dostępna na wszystkich elementach, jakie możesz sobie stworzyć

1:33albo znaleźć w drzewie dokumentu i nazywa się appendChild

1:40i jej należy przekazać właśnie albo jakiś Element, albo TextNode. Więc

1:45przekazujemy go tutaj w ten sposób i dzięki temu ten element li będzie miał

1:49już wewnątrz treść właśnie z takim tekstem.

1:52I teraz pozostało ten element wstawić na

1:54stronę właśnie do UL, które tutaj sobie zapisałem i wyszukałem,

1:59a więc list 1

2:00i znowu można powiedzieć appendChild,

2:03albo można skorzystać właśnie z metody append, tylko to jest trochę nowsza metoda.

2:07Te metody, które Ci pokazuję działają we

2:08wszystkich nowoczesnych przeglądarkach, więc tutaj nie ma się czym martwić,

2:12natomiast samo appendChild jest po prostu trochę starszą metodą,

2:16też chciałem Ci ją pokazać, żebyś wiedział, że taka istnieje.

2:19Ona będzie działać w tym przypadku tak samo, więc przekażemy sobie tutaj li

2:24i teraz jeżeli to zapiszę, to kiedy strona się wczytuje i ten skrypt

2:28jest tutaj, on się wykona, to zostanie to wszystko dodane.

2:33Czyli ten jeden element zostanie dodany tutaj.

2:35Natomiast bardzo ważna uwaga, gdybyśmy ten skrypt umieścili gdzieś indziej, np.

2:40tutaj w head to to nam by nie zadziałało,

2:43bo w momencie kiedy przeglądarka dojdzie do tego skryptu, zacznie go wczytywać

2:46i będzie chciała na stronie wyszukać elementu z identyfikatorem list 1

2:50to tutaj zostanie zwrócone null, dlatego,

2:52że ten element jeszcze nie został utworzony.

2:55Jak to obejść

2:56to jeszcze Ci powiem kiedy będziemy mówili o eventach,

2:58natomiast generalnie dobrą praktyką jest,

3:00aby te skrypty umieszczać zawsze na dole. I tutaj też mamy pewność, że wszystkie te

3:04elementy zostały już utworzone przez przeglądarkę.

3:07I jeżeli ten skrypt wyszukuje tego elementu to go po prostu znajdzie.

3:11OK, zapiszmy, strona się odświeży i zauważ, że na samym końcu

3:15jak najbardziej został tutaj dodany nowy element li, który możemy sobie podejrzeć.

3:20A więc zrobiliśmy to dynamicznie z użyciem języka JavaScript.

3:24Pokażę Ci teraz ciekawą rzecz, bo co prawda my ten element li wstawiliśmy na

3:28stronę, ale my nadal mamy do niego odwołanie.

3:30Czyli jest tutaj on pod li, dokładnie tak

3:33samo jak byśmy sobie go wyszukali na stronie. I jeżeli chciałbym ten element z

3:37jakiegoś powodu przenieść do drugiej listy, to wystarczy skorzystać z append na

3:41tej liście przekazując ten element i on się tam po prostu znajdzie.

3:44A więc mogę sobie wyszukać tej drugiej listy za pomocą takiego zapisu.

3:49Nawet nie muszę w żadnej zmiennej ją

3:50zapisywać i na niej skorzystamy z metody append i przekażemy tam li. Zobacz.

3:58Po zapisaniu ten element znalazł się tutaj.

4:00Czyli on tak naprawdę został wstawiony

4:01tutaj na koniec, ale potem został wyciągnięty przeniesiony w inne miejsce.

4:05A więc aby przenieść element gdzieś indziej, wystarczy, że po prostu wstawimy

4:09go w inne miejsce na stronie i on się tam automatycznie znajdzie.

4:13Jeżeli chodzi o inne metody, takie jak

4:15append, to mamy jeszcze metodę prepend i ja je tutaj po prostu wpiszę i proszę

4:19poeksperymentuj sobie z nimi prepend, before, after

4:25i jeszcze jedna metoda, o której za moment

4:27sobie powiemy, czyli do usuwania. Jak zadziała prepend?

4:30Otóż append dodaje nam element na końcu, prepend doda go na początku.

4:35Natomiast gdybyśmy skorzystali z before dodali byśmy element przed.

4:39Czyli gdybym powiedział, że chcę przed tym ul dodać element li byłoby to tutaj

4:44nie byłoby to poprawne, bo li powinno znajdować się w ul,

4:47ale jeżeli właśnie tutaj zrobiłbym zamiast append zrobiłbym before

4:52to można powiedzieć, że ten element li został by wstawiony tutaj.

4:55Jeżeli zrobiłbym metodę after zostałby wstawiony tutaj.

4:58Append wstawia go w środku na końcu, a prepend w środku na początku.

5:02Więc jeżeli jakiś element div np.

5:04chciałbyś umieścić przed tym elementem

5:06list 1, to powiedziałbyś list 1 before i tam przekazał byś div.

5:11Mam nadzieję, że to jest jasne, ale poeksperymentuj sobie z tym.

5:14Natomiast na koniec chciałbym Ci pokazać,

5:15że możemy również usuwać elementy z drzewa DOM i powiedzmy, że chcielibyśmy

5:21na przykład ten element usunąć z tej pierwszej listy.

5:25Zrobimy to w ten sposób.

5:27Odwołamy się do tej listy pierwszej i w

5:29niej wyszukamy za pomocą querySelector ostatniego elementu.

5:33W CSS możemy podać to w ten sposób last-child to nam znajdzie ostatni element,

5:37czyli będzie to ten element listy 1.5 I wystarczy, że na nim wywołamy metodę

5:42remove. Więc na dowolnym elemencie, który znajduje się w drzewie DOM

5:46jak wywołasz metodę remove, zostanie on z

5:48tego drzewa usunięty, co mogłeś zobaczyć właśnie teraz.

5:52I jeżeli chodzi o te metody jest jeszcze więcej takich starszych metod,

5:55natomiast ja pokazałem Ci te nowe, które dobrze działają i które w zasadzie

5:58wystarczą Ci do tego, aby w dowolne miejsce na stronie wstawić element

6:02i jak widzisz również ten element usunąć.