JavaScript: Tworzenie elementów HTML

0:00Teraz pokażę Ci krótko i omówię w jaki

0:03sposób możemy tworzyć nowe elementy z użyciem kodu JavaScript.

0:07W zasadzie po co to robić?

0:08Mamy tutaj nasze drzewo DOM i ono zostało wyrenderowane z takiego oto kodu.

0:13Czyli można powiedzieć, że bez użycia języka JavaScript.

0:16Jeżeli chcemy coś mieć na stronie, musi

0:18się to znaleźć tutaj w kodzie html i przeglądarka to stworzy.

0:22Natomiast z poziomu języka JavaScript

0:23można tworzyć nowe elementy HTML, takie jak np. ten section i wstawiać je na stronę.

0:29O tym wstawianiu powiemy sobie później, natomiast w tej lekcji pokażę Ci, jak

0:32możemy takie elementy tworzyć i z czym to się wiąże.

0:36Jest jedna główna metoda, która w zasadzie Ci wystarczy do tworzenia elementów html.

0:42Jest to metoda createElement na obiekcie dokument.

0:45Więc wyobraźmy sobie, że chcemy utworzyć nowego div nazwę zmienną div, chociaż

0:49oczywiście mam nadzieję, że na tym etapie już wiesz

0:52to jest tylko nazwa stałej,

0:53ona nie ma nic wspólnego z tym, co za moment utworzymy.

0:56Czyli możesz to nazwać jak chcesz np.

0:58element i odwołamy się do obiektu document i on oprócz metod, które już poznałeś takich

1:02jak np. querySelector ma też metodę create element.

1:07Tutaj przekazujemy string

1:09z nazwą tagu. Czyli jeżeli chcemy utworzyć section podamy section.

1:13Jeżeli diva podajemy div czyli string tu

1:15przekazujemy albo literalnie bezpośrednio, albo taki string mógł być oczywiście

1:19zapisany w zmiennej. I taka linijka kodu utworzyła nam nowy element div.

1:24I teraz co się z tym wiąże?

1:26Na tym etapie w zasadzie nic się nie

1:29wydarzy na stronie, bo ten element nigdzie nie jest wstawiony,

1:32ale jak się do niego odwołamy tutaj w konsoli wyświetli nam to w ten sposób.

1:36Ale chcę Ci od razu powiedzieć, że my tak naprawdę mamy utworzony dokładnie taki sam

1:40element, jak moglibyśmy wyszukać z użyciem querySelector. Czyli na przykład jak byśmy sobie tego

1:45section wyszukali, to ja Ci już pokazywałem w poprzednich lekcjach, że będziemy mieli

1:50jakieś właściwości i metody na tych właśnie obiektach.

1:54I dokładnie jest tak samo jak sobie utworzymy taki element.

1:57On też ma dokładnie te same właściwości i dokładnie te same metody.

2:01Jedyna różnica jest taka, że nie znajduje się on jeszcze na stronie w drzewie DOM,

2:06bo musimy go tam wstawić, o czym sobie powiemy w kolejnych lekcjach.

2:09Natomiast to jest dokładnie taki sam

2:10element jak ten, którego możemy wyszukać, czyli taki, który jest zwracany, np.

2:14z querySelector,

2:16to jest taki sam obiekt jak ten, który tworzymy z użyciem createElement.

2:20Jeżeli już się uczyłeś JavaScript albo będziesz przeglądał Internet jeszcze w tym

2:24temacie, możesz się natknąć również na to, że można tworzyć w inny sposób elementy.

2:28Na przykład, jeżeli chcielibyśmy utworzyć nowy element img,

2:33to oczywiście najlepiej jest tutaj wpisać po prostu img i go utworzyć,

2:36ale możesz się spotkać również z tym,

2:39że taki element jest tworzony za pomocą takiego konstruktora new Image. I w

2:44zasadzie to będzie to samo, co jak byśmy tutaj wpisali img.

2:48I teraz kiedy z czegoś takiego korzystać?

2:50Powiem Ci od razu,

2:51nigdy. Nie ma powodu, żebyś korzystał z takich archaicznych zapisów.

2:54One są i działają tylko dlatego, że w

2:57zasadzie od lat 90 tych były zaimplementowane w przeglądarkach i ze

3:00względu na wsteczną kompatybilność cały czas tam są

3:04więc dla niektórych elementów, bo też nie dla wszystkich np.

3:07nie utworzysz sobie dowolnego elementu podstawiając tutaj jego

3:10tag

3:11czyli dla niektórych elementów były takie specjalne konstruktory.

3:14Niemniej jednak nie polecam Ci, żebyś z nich korzystał.

3:16Zapamiętaj sobie metodę createElement i tam przekazuj odpowiedni tag,

3:20będzie to zawsze działać tak, jak tego oczekujesz.

3:24Oprócz elementów HTML mówiłem Ci też, że w drzewie DOM znajdują się tzw.

3:29węzły tekstowe. Czyli jak byśmy sobie tutaj

3:31zetknęli mamy element HTML, w nim kolejny, tutaj kolejny,

3:36ale ten element ma

3:37można powiedzieć dziecko, które jest tekstem.

3:40I czasami zdarza się, chociaż przyznam

3:42szczerze, że dosłownie może kilka razy w życiu z tego korzystałem, że potrzebujesz

3:46utworzyć element tekstowy, który następnie wstawisz do jakiegoś elementu HTML.

3:51Więc bardziej w formie ciekawostki i tego, żebyś wiedział, chcę Ci to pokazać,

3:55utworzymy sobie

3:56taką stałą tekst i odwołamy się do dokument i następnie createTextNode

4:01i tutaj przekazujemy string i będzie to powiedzmy treść.

4:07To sprawi, że do stałej text zostanie zwrócony obiekt, który nie jest elementem

4:12HTML tak jak tutaj div tylko jest właśnie elementem tekstowym.

4:16I jak zobaczysz w kolejnych lekcjach,

4:17kiedy będziemy wstawiać jeden element do drugiego czy elementy na stronę, będziemy

4:22tam mieć taką metodę append child i ona oczekuje, że przekażemy albo element

4:27utworzony w ten sposób, albo element utworzony w ten sposób.

4:30Jeżeli byśmy np. do tej h1 chcieli

4:32wstawić tekst, to właśnie mając odwołanie do h1 powiedzielibyśmy append child i

4:37musielibyśmy przekazać to, co mamy w takiej stałej.

4:40Czyli w ten sposób można tworzyć obiekty,

4:42które reprezentują tekst, a w ten sposób obiekty, które reprezentują elementy HTML.