0:00:01.061,0:00:06.850
Na razie modyfikowaliśmy elementy[br]istniejące już na stronie.

0:00:07.017,0:00:10.123
A gdybyśmy chcieli dodać tam nowe?

0:00:10.316,0:00:12.849
Moglibyśmy - za pomocą "innerHTML",

0:00:12.949,0:00:17.484
pisząc HTML do tagów w ciągu,[br]który wprowadzamy.

0:00:17.636,0:00:21.078
Tak jak tutaj.[br]Tylko że może się zrobić bałagan,

0:00:21.158,0:00:25.827
zwłaszcza gdy chcecie tworzyć tagi[br]o różnych atrybutach, stylach i klasach.

0:00:25.987,0:00:31.403
Zamiast tego użyjmy[br]całego wachlarza metod

0:00:31.537,0:00:36.223
tworzenia elementów od zera[br]i umieszczania ich na stronie.

0:00:36.323,0:00:40.855
Powiedzmy,[br]że chcemy dodać zdjęcie kota,

0:00:40.955,0:00:44.130
bo na stronie[br]jest ich jeszcze za mało.

0:00:44.237,0:00:48.622
Pierwszy krok - to stworzyć[br]nowy element "img", tak?

0:00:48.773,0:00:51.094
To chcemy utworzyć.

0:00:51.194,0:00:55.877
Zaczniemy od zmiennej,[br]która będzie go przechowywać: "catEl".

0:00:55.977,0:01:00.780
A potem damy:[br]"document.createElement"

0:01:00.940,0:01:04.667
i wpiszemy nazwę znacznika,[br]który robimy, czyli "img".

0:01:06.989,0:01:08.429
Można sobie wyobrazić,

0:01:08.544,0:01:11.852
że przeglądarka[br]zrobiła znacznik zdjęcia, o, taki,

0:01:11.959,0:01:15.302
i unosi się on gdzieś w przestrzeni.

0:01:15.454,0:01:18.896
Następny krok[br]- to przypisać mu źródło.

0:01:19.056,0:01:23.452
Zatem: "catEl.src =".

0:01:23.565,0:01:26.238
Weźmy źródło stąd...

0:01:29.629,0:01:32.584
...i powinniśmy dodać jeszcze "alt",

0:01:32.717,0:01:34.783
by obraz był łatwiej dostępny.

0:01:34.852,0:01:36.525
Nie robię tego,

0:01:36.625,0:01:41.331
ale powinnam zawsze mieć[br]"alt" przy zdjęciach.

0:01:42.353,0:01:45.000
Jak widać, ten tag "zdjęcie",

0:01:45.151,0:01:49.393
który zrobiliśmy, ma...

0:01:49.526,0:01:50.700
źródło ("src")...

0:01:50.759,0:01:53.093
i ma też...

0:01:54.035,0:01:58.518
"alt" - "Photo of cute cat"[br](zdjęcie ślicznego kota). No dobrze.

0:01:58.618,0:02:03.374
To zrobiliśmy z użyciem JavaScript.

0:02:05.062,0:02:08.789
Nasz tag "img"[br]nadal unosi się w przestrzeni:

0:02:08.889,0:02:11.527
przeglądarka nie wie,[br]gdzie go umieścić.

0:02:11.627,0:02:15.906
Nasz DOM ma wiele różnych miejsc,[br]w których mógłby się znaleźć.

0:02:16.048,0:02:21.409
Zróbmy coś prostego:[br]niech słowo pojawi się u dołu strony.

0:02:21.624,0:02:25.946
Osiągniemy to,[br]pisząc na końcu tagu "body":

0:02:26.053,0:02:29.575
"document.body.appendChild(catEl)".

0:02:29.762,0:02:32.563
I jest! Całkiem spory!

0:02:32.670,0:02:35.338
Duży, straszny kot!

0:02:35.445,0:02:41.123
Można przywołać "appendChild" w każdym[br]istniejącym węźle DOM-u na stronie.

0:02:41.181,0:02:43.663
Sprawi, że wprowadzony element

0:02:43.763,0:02:47.665
zostanie ostatnim dzieckiem[br]w tym węźle.

0:02:47.798,0:02:52.268
Tutaj pomoże nam wizualizacja:[br]DOM jako drzewo.

0:02:52.387,0:02:56.030
Tag "body" to węzeł na tym drzewie,

0:02:56.176,0:03:00.140
i ma całą grupę dzieci, np. "h1" i "p".

0:03:00.258,0:03:04.180
Dodajecie[br]jeszcze jedno dziecko na końcu.

0:03:04.287,0:03:08.104
Znajdzie się za tagiem "script", tutaj.

0:03:09.637,0:03:10.914
Używając metod DOM-u,

0:03:10.984,0:03:15.581
teoretycznie powinniście dokładać[br]elementy w dowolnym punkcie drzewa.

0:03:15.680,0:03:19.885
My umieściliśmy element[br]w najbardziej oczywistym miejscu.

0:03:19.985,0:03:22.060
Jeszcze jeden przykład.

0:03:22.244,0:03:25.682
Użyliśmy tutaj "innerHTML",

0:03:25.846,0:03:28.530
by umieścić tagi "strong"[br]wewnątrz "span".

0:03:28.630,0:03:31.603
Można też użyć[br]polecenia "stwórz element".

0:03:31.742,0:03:35.024
"var strongEl = document"...

0:03:35.238,0:03:39.544
".createElement strong".

0:03:39.693,0:03:43.909
Źle zapisałam,[br]a pisownia jest bardzo ważna.

0:03:44.016,0:03:46.858
Powstaje więc pusty tag "strong",

0:03:47.004,0:03:48.948
unoszący się w przestrzeni.

0:03:49.032,0:03:52.127
Najpierw ustalimy tekst.

0:03:52.234,0:03:56.611
Piszemy zatem:[br]strongEl.textContent = "cat".

0:03:56.796,0:03:58.074
W porządku?

0:03:58.157,0:04:01.928
Moglibyśmy również zrobić coś innego:

0:04:02.079,0:04:04.784
stworzyć tzw. węzeł tekstowy[br](textNode).

0:04:04.881,0:04:07.153
Wiele węzłów w drzewie DOM-u

0:04:07.282,0:04:10.984
może zawierać jako dzieci[br]specjalny typ węzłów, "textNode".

0:04:11.097,0:04:12.805
To nie są elementy,

0:04:12.938,0:04:15.326
lecz nadal węzły w drzewie DOM-u.

0:04:15.446,0:04:19.853
Tzw. "węzły-liście" to ostatnie rzeczy,[br]które mogą się znajdować w drzewie.

0:04:19.982,0:04:22.640
"Var strongText"...

0:04:22.810,0:04:26.193
"= document.createTextNode".

0:04:27.506,0:04:30.721
Wpiszemy tekst: "cat".

0:04:32.044,0:04:33.670
Używając tej metody,

0:04:33.803,0:04:39.630
stworzyliśmy dwa węzły w przestrzeni.

0:04:39.730,0:04:41.781
Tag "strong"...

0:04:41.994,0:04:46.139
oraz ten "textNode",[br]czyli po prostu "cat".

0:04:46.812,0:04:49.738
Musimy je połączyć.

0:04:49.919,0:04:54.893
Chcemy, żeby "strong"[br]był rodzicem "cata".

0:04:55.041,0:05:01.441
Musimy więc napisać:[br]"strongEl.appendChild(strongText)".

0:05:03.366,0:05:06.443
Teraz, kiedy już mamy...

0:05:07.037,0:05:10.170
"strong" z kotem wewnątrz,

0:05:12.610,0:05:17.116
musimy go gdzieś umieścić,[br]bo nadal unosi się w przestrzeni.

0:05:18.112,0:05:22.571
Jesteśmy wewnątrz pętli FOR[br]dla "nameEls".

0:05:22.683,0:05:26.890
Do każdego "nameEl"[br]chcemy dodać tag "strong".

0:05:26.979,0:05:29.674
Mamy więc tutaj: "nameEls[i]"...

0:05:29.914,0:05:34.157
".appendChild(strongEl)".

0:05:34.797,0:05:38.709
Aha, teraz widzimy to dwa razy,

0:05:38.809,0:05:42.401
bo zostawiłam stary sposób.

0:05:42.508,0:05:46.999
Przytwierdził się do tagu "span",[br]który ma już w sobie "strong".

0:05:47.138,0:05:49.098
Moglibyśmy zmienić ten wiersz

0:05:49.198,0:05:52.406
na "innerHTML = empty string"[br](pusty ciąg).

0:05:52.506,0:05:56.355
Wtedy wyczyściłby się "span",[br]zanim do niego dojdziemy.

0:05:57.796,0:06:03.438
Widzieliście: wymagało to więcej[br]wierszy kodu niż wersja "innerHTML".

0:06:05.482,0:06:07.293
Dlaczego to zrobiliśmy?

0:06:07.401,0:06:11.263
Projektanci stron nie lubią[br]modyfikować dokumentów w ten sposób,

0:06:11.377,0:06:13.283
bo wymaga to więcej programu.

0:06:13.431,0:06:16.836
Większość projektantów[br]używa bibliotek, np. jQuery,

0:06:17.006,0:06:19.414
by za nich robiły modyfikacje DOM-u.

0:06:19.595,0:06:22.883
Biblioteki mają funkcje,[br]które robią ten sam program,

0:06:22.983,0:06:26.825
a wy musicie wpisać[br]znacznie mniej wierszy.

0:06:26.925,0:06:29.700
Wyręczają was funkcje biblioteki.

0:06:29.813,0:06:32.347
Lubię w ten sposób pisać program,

0:06:32.482,0:06:34.576
ponieważ doskonale widzę,

0:06:34.696,0:06:38.405
jak modyfikuję drzewo DOM-u,[br]wiersz po wierszu.

0:06:38.565,0:06:43.075
To wygląda porządniej niż wpisywanie[br]wszystkiego w ciąg "inner HTML".

0:06:43.181,0:06:47.163
Wam może się nie podoba.[br]Ale już wiecie, że jest taka metoda.

0:06:47.263,0:06:49.530
Używajcie jej w razie potrzeby,

0:06:49.664,0:06:54.127
a zorientujecie się, co biblioteki[br]takie jak jQuery robią za kulisami.