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.