JavaScript - DHTML, standard w3c DOM, dodawanie elementów, tworzenie elementów

Kod:

Ewentualne Objaśnienia:

Pokazałem Wam już jak zmieniać kod danego elementu poprzez innerHTML jednak fakt jest taki, że atrybut ten nie jest zgodny ze standardem World Wide  Web Consortium (w3c). Dlatego też dla różnych przeglądarek mogą pojawiać się problemy, rozbieżności (np. nazewnictwo atrybutów wielkimi literami). Zgodnie z w3c dodawanie nowych elementów, usuwanie itd. powinno się odbywać przez metody DOM . Są to metody nie tylko dla JS, ale bardzo ważne jest to dla AJAXa. Jak już kiedyś wspominałem DOM definiuje hierarchię dokumentu (strony). W najwyższym węźle jest element HTML, on znowu posiada dwa węzły potomne (HEAD  i BODY),  BODY znowu posiada swoje węzły potomne (div, form itd.), elementy te również mają swoje węzły potomne (np. form ma inputy itp.).

No i tutaj mamy taki prosty przykład tworzenia nowego bolku DIV w oparciu o standard w3c DOM :
- nowy element tworzymy przez instrukcję document.create("element") - powoduje to utworzenie elementu DIV, ale nie jest on widoczny jeszcze na stronie.
- następnie poprzez setAttribute ustawiamy atrybut id dla naszego nowego diva
- chcemy wstawić naszego nowego diva na końcu strony. Potrzeba nam więc  węzeł macierzysty (czyli ten, do którego nasz nowy element będzie należał) czyli BODY. Przez znaną już metodę wybieramy węzeł macierzysty, a następnie poprzez appenChild - dodajemy nowy znacznik do końca listy potomnych elementów body
- teraz chcemy dodać do tego naszego nowego diva jakiś tekst, moglibyśmy użyć znanego innerHTML, ale jak mówiłem chcemy działać zgodnie ze standardem w3c, dlatego należy najpierw dodać węzeł tekstowy i uczynić go elementem potomnym naszego nowego diva, czyli tworzymy węzeł tekstowy poprzez createTextNode oraz robimy z niego element potomny diva poprzez appenChild
- na końcu funkcji wyświetlany jest alert komunikujący aby zobaczyć na dół strony, bo właśnie tam pojawia się nowy DIV