Na razie modyfikowaliśmy elementy
istniejące już na stronie.

A gdybyśmy chcieli dodać tam nowe?

Moglibyśmy - za pomocą "innerHTML",

pisząc HTML do tagów w ciągu,
który wprowadzamy.

Tak jak tutaj.
Tylko że może się zrobić bałagan,

zwłaszcza gdy chcecie tworzyć tagi
o różnych atrybutach, stylach i klasach.

Zamiast tego użyjmy
całego wachlarza metod

tworzenia elementów od zera
i umieszczania ich na stronie.

Powiedzmy,
że chcemy dodać zdjęcie kota,

bo na stronie
jest ich jeszcze za mało.

Pierwszy krok - to stworzyć
nowy element "img", tak?

To chcemy utworzyć.

Zaczniemy od zmiennej,
która będzie go przechowywać: "catEl".

A potem damy:
"document.createElement"

i wpiszemy nazwę znacznika,
który robimy, czyli "img".

Można sobie wyobrazić,

że przeglądarka
zrobiła znacznik zdjęcia, o, taki,

i unosi się on gdzieś w przestrzeni.

Następny krok
- to przypisać mu źródło.

Zatem: "catEl.src =".

Weźmy źródło stąd...

...i powinniśmy dodać jeszcze "alt",

by obraz był łatwiej dostępny.

Nie robię tego,

ale powinnam zawsze mieć
"alt" przy zdjęciach.

Jak widać, ten tag "zdjęcie",

który zrobiliśmy, ma...

źródło ("src")...

i ma też...

"alt" - "Photo of cute cat"
(zdjęcie ślicznego kota). No dobrze.

To zrobiliśmy z użyciem JavaScript.

Nasz tag "img"
nadal unosi się w przestrzeni:

przeglądarka nie wie,
gdzie go umieścić.

Nasz DOM ma wiele różnych miejsc,
w których mógłby się znaleźć.

Zróbmy coś prostego:
niech słowo pojawi się u dołu strony.

Osiągniemy to,
pisząc na końcu tagu "body":

"document.body.appendChild(catEl)".

I jest! Całkiem spory!

Duży, straszny kot!

Można przywołać "appendChild" w każdym
istniejącym węźle DOM-u na stronie.

Sprawi, że wprowadzony element

zostanie ostatnim dzieckiem
w tym węźle.

Tutaj pomoże nam wizualizacja:
DOM jako drzewo.

Tag "body" to węzeł na tym drzewie,

i ma całą grupę dzieci, np. "h1" i "p".

Dodajecie
jeszcze jedno dziecko na końcu.

Znajdzie się za tagiem "script", tutaj.

Używając metod DOM-u,

teoretycznie powinniście dokładać
elementy w dowolnym punkcie drzewa.

My umieściliśmy element
w najbardziej oczywistym miejscu.

Jeszcze jeden przykład.

Użyliśmy tutaj "innerHTML",

by umieścić tagi "strong"
wewnątrz "span".

Można też użyć
polecenia "stwórz element".

"var strongEl = document"...

".createElement strong".

Źle zapisałam,
a pisownia jest bardzo ważna.

Powstaje więc pusty tag "strong",

unoszący się w przestrzeni.

Najpierw ustalimy tekst.

Piszemy zatem:
strongEl.textContent = "cat".

W porządku?

Moglibyśmy również zrobić coś innego:

stworzyć tzw. węzeł tekstowy
(textNode).

Wiele węzłów w drzewie DOM-u

może zawierać jako dzieci
specjalny typ węzłów, "textNode".

To nie są elementy,

lecz nadal węzły w drzewie DOM-u.

Tzw. "węzły-liście" to ostatnie rzeczy,
które mogą się znajdować w drzewie.

"Var strongText"...

"= document.createTextNode".

Wpiszemy tekst: "cat".

Używając tej metody,

stworzyliśmy dwa węzły w przestrzeni.

Tag "strong"...

oraz ten "textNode",
czyli po prostu "cat".

Musimy je połączyć.

Chcemy, żeby "strong"
był rodzicem "cata".

Musimy więc napisać:
"strongEl.appendChild(strongText)".

Teraz, kiedy już mamy...

"strong" z kotem wewnątrz,

musimy go gdzieś umieścić,
bo nadal unosi się w przestrzeni.

Jesteśmy wewnątrz pętli FOR
dla "nameEls".

Do każdego "nameEl"
chcemy dodać tag "strong".

Mamy więc tutaj: "nameEls[i]"...

".appendChild(strongEl)".

Aha, teraz widzimy to dwa razy,

bo zostawiłam stary sposób.

Przytwierdził się do tagu "span",
który ma już w sobie "strong".

Moglibyśmy zmienić ten wiersz

na "innerHTML = empty string"
(pusty ciąg).

Wtedy wyczyściłby się "span",
zanim do niego dojdziemy.

Widzieliście: wymagało to więcej
wierszy kodu niż wersja "innerHTML".

Dlaczego to zrobiliśmy?

Projektanci stron nie lubią
modyfikować dokumentów w ten sposób,

bo wymaga to więcej programu.

Większość projektantów
używa bibliotek, np. jQuery,

by za nich robiły modyfikacje DOM-u.

Biblioteki mają funkcje,
które robią ten sam program,

a wy musicie wpisać
znacznie mniej wierszy.

Wyręczają was funkcje biblioteki.

Lubię w ten sposób pisać program,

ponieważ doskonale widzę,

jak modyfikuję drzewo DOM-u,
wiersz po wierszu.

To wygląda porządniej niż wpisywanie
wszystkiego w ciąg "inner HTML".

Wam może się nie podoba.
Ale już wiecie, że jest taka metoda.

Używajcie jej w razie potrzeby,

a zorientujecie się, co biblioteki
takie jak jQuery robią za kulisami.