DOM - mkNode

Napisz skrypt (funkcję) o nazwie zgodnej z nazwą pliku-skryptu, który przyspieszy tworzenie nowych węzłów.

Utwórz kod stosując się do poniższych wytycznych:

• stwórz metodę automatyzującą dodawanie nowego węzła, która będzie przyjmować 3 parametry:

• nazwę węzła(znacznika), atrybuty znacznika, style CSS (atrybuty i style powinny być przekazywane jako struktura klucz(tekstowy)-wartość)

• stosuj pętle wszędzie tam, gdzie działania dla elementów się powtarzają

• stosuj tablice asocjacyjne (obiekty) kiedy wymagane jest przechowywanie kolekcji informacji typu klucz-wartość

Zadaniem funkcji jest przyjęcie 3 rodzajów parametrów:

• #1 nazwa węzła (znacznika), typu String, który należy stworzyć

• a) j/w

• b) jeżeli podasz tutaj tablicę 2-ch elementów: to drugi element, to jest węzeł, do którego należy dodać tworzony węzeł;

• #2 atrybuty HTML, które powinien przyjąć (np. klasę, ID, data-attr*, itp.) oraz informacje jak np. tekst do wyświetlenia lub tekst w znaczniku,

• #3 oraz opcjonalny parametr styli liniowych CSS (np. "color":"red" )

Przykład znacznika, który ma zostać zbudowany przez funkcję:

<div id="mojeId" class="mojaKlasa" data-test="ok"
 style="color: red; background-color: yellow; height: 50px; width: 100px;">
Tekst dla znacznika</div>

Wewnątrz funkcji należy użyć:

• konstrukcji JS: warunków, pętli, odczytu tablic i/lub obiektów (tablic asocjacyjnych),
• funkcji wbudowanych: createElement(), setAttribute(), appendChild()

1. Wywołaj funkcję z odpowiednimi parametrami - stwórz dwa węzły (z przykłądu wyżej oraz własny)
2. Zachowaj skrypt - będziesz go rozwijał, a później używał (w innych skryptach i zadaniach).
3. Skrypt zostanie rozwinięty m.in. o obsługę zdarzeń (Events).