Tworzenie i usuwanie elementów w DOM

W języku JavaScript możemy dynamicznie tworzyć i usuwać elementy HTML w dokumencie. Pozwala to na interaktywne modyfikowanie zawartości strony bez jej przeładowania. Do najczęściej używanych metod należą:

• createElement() - tworzy nowy element HTML.

• appendChild() - dodaje element jako dziecko wybranego elementu.

• remove() - usuwa wybrany element z dokumentu.

Dzięki nim można dodawać listy, obrazki, przyciski czy dowolne inne elementy w locie oraz usuwać je w odpowiedzi na działania użytkownika.

1. createElement + appendChild:

<div id="lista"></div>
<button id="dodaj">Dodaj element</button>

<script>
const lista = document.getElementById("lista");
const przycisk = document.getElementById("dodaj");

przycisk.addEventListener("click", function() {
  const nowyElement = document.createElement("p"); // tworzymy nowy element <p>
  nowyElement.textContent = "Nowy paragraf";
  lista.appendChild(nowyElement); // dodajemy go do <div id="lista">
});
</script>

2. removeChild()

Usuwa wskazane dziecko z elementu nadrzędnego.

Składnia:

rodzic.removeChild(element);

Przykład:

<ul id="lista">
  <li id="pierwszy">Pierwszy</li>
  <li>Drugi</li>
</ul>

<script>
  const lista = document.getElementById("lista");
  const pierwszy = document.getElementById("pierwszy");
  lista.removeChild(pierwszy);
</script>

3. replaceChild()

Zastępuje istniejący element innym.

Składnia:

rodzic.replaceChild(nowyElement, staryElement);

Przykład:

<ul id="lista">
  <li>Stary element</li>
</ul>

<script>
  const lista = document.getElementById("lista");
  const nowy = document.createElement("li");
  nowy.textContent = "Nowy element";

  const stary = lista.firstElementChild;
  lista.replaceChild(nowy, stary);
</script>

4. document.write()

Wpisuje kod HTML bezpośrednio do dokumentu.
Uwaga: po załadowaniu strony nadpisuje całą treść!

Składnia:

document.write("tekst lub HTML");

Przykład:

<script>
  document.write("<h2>Wygenerowany nagłówek</h2>");
</script>

Tabela porównawcza operacji DOM

addEventListener w JavaScript

Metoda addEventListener() służy do przypisywania funkcji do zdarzenia w języku JavaScript. Pozwala reagować na działania użytkownika, takie jak kliknięcie, najechanie kursorem, wprowadzenie danych czy przewinięcie strony. W przeciwieństwie do atrybutów takich jak onclick czy onchange, metoda addEventListener() oddziela strukturę HTML od logiki JavaScript, co ułatwia zarządzanie kodem i pozwala przypisać wiele funkcji do jednego zdarzenia.

1. addEventListener - przypisywanie zdarzenia w kodzie JavaScript

Metoda addEventListener() umożliwia nasłuchiwanie wybranego zdarzenia na elemencie i wykonanie określonej funkcji, gdy to zdarzenie wystąpi.

Jej składnia to:

element.addEventListener("nazwaZdarzenia", funkcja);

Przykład 1:

<p id="tekst">Kliknij przycisk</p>
<button id="btn">Kliknij mnie</button>

<script>
document.getElementById("btn").addEventListener("click", function() {
  document.getElementById("tekst").textContent = "Przycisk został kliknięty!";
});
</script>

Wyjaśnienie:

• addEventListener("click", ...) - nasłuchuje zdarzenia kliknięcia na przycisku.

• Funkcja anonimowa w środku zmienia tekst elementu <p> po kliknięciu.

• W odróżnieniu od onclick, nie umieszczamy żadnego kodu w HTML - wszystko odbywa się po stronie JavaScript, co poprawia czytelność i rozdziela warstwy kodu.

Przykład 2:

<div id="box" style="width:200px; height:100px; background:lightgray; text-align:center; line-height:100px;">
  Najedź na mnie
</div>

<script>
const box = document.getElementById("box");

box.addEventListener("mouseover", function() {
  box.style.background = "lightgreen";
  box.textContent = "Najechałeś!";
});

box.addEventListener("mouseout", function() {
  box.style.background = "lightgray";
  box.textContent = "Najedź na mnie";
});
</script>

Wyjaśnienie:

• addEventListener("mouseover", ...) - reaguje, gdy kursor myszy znajdzie się nad elementem.

• addEventListener("mouseout", ...) - reaguje, gdy kursor opuści element.

• Dzięki tej metodzie możemy dodawać wiele różnych reakcji do jednego elementu, bez nadpisywania wcześniejszych.

• Takie podejście jest bardziej elastyczne i zalecane w nowoczesnym JavaScript.

Zdarzenia myszy w JS

Zdarzenia myszy pozwalają reagować na działania użytkownika na stronie - kliknięcia, podwójne kliknięcia oraz najechanie i opuszczenie elementu.

1. onclick - reakcja na kliknięcie elementu

Zdarzenie onclick uruchamia się, gdy użytkownik kliknie dany element (np. przycisk, obrazek, link).
Najczęściej używane jest do reagowania na działania użytkownika - np. po kliknięciu można zmienić tekst, kolor, ukryć element lub wywołać funkcję.

Przykład 1: Zmiana tekstu po kliknięciu

<p id="tekst">Kliknij przycisk</p>
<button onclick="zmienTekst()">Kliknij mnie</button>

<script>
function zmienTekst() {
  document.getElementById("tekst").textContent = "Przycisk został kliknięty!";
}
</script>

Wyjaśnienie:

• onclick="zmienTekst()" - wywołuje funkcję po kliknięciu przycisku.

• Funkcja zmienTekst() modyfikuje zawartość elementu <p> poprzez zmianę jego tekstu.

Przykład 2: Zmiana obrazka po kliknięciu

<img id="obrazek" src="https://via.placeholder.com/150" onclick="zmienObrazek()">

<script>
function zmienObrazek() {
  obrazek.src = "https://via.placeholder.com/150/ff0000";
}
</script>

Wyjaśnienie:

• onclick - po kliknięciu obraz zmienia się na inny.

• Pokazuje, że kliknięcie może wywoływać dowolną akcję: zmianę zdjęcia, koloru czy widoczności elementu.

2. ondblclick - reakcja na podwójne kliknięcie

Zdarzenie ondblclick uruchamia się, gdy użytkownik wykona podwójne kliknięcie na elemencie.
Często stosowane do dodatkowych funkcji, np. szybkiej zmiany wyglądu lub zaznaczenia elementu.

Przykład: Zmiana koloru tła po podwójnym kliknięciu

<div id="pole" style="width:150px; height:80px; background:#ddd; text-align:center; line-height:80px;">
  Podwójnie kliknij
</div>

<script>
const pole = document.getElementById("pole");

pole.ondblclick = () => {
  pole.style.background = "lightgreen";
  pole.textContent = "Zmieniono!";
};
</script>

Wyjaśnienie:

• ondblclick - wywołuje funkcję po dwukrotnym kliknięciu.

• Funkcja zmienia tło i tekst elementu <div>.

3. onmouseover - reakcja na najechanie kursorem

Zdarzenie onmouseover uruchamia się, gdy kursor myszy znajdzie się nad elementem.
Najczęściej używane do zmiany koloru, podświetlenia lub wyświetlania dodatkowych informacji.

Przykład: Podświetlenie elementu

<div id="box" style="width:120px; height:60px; background:skyblue; text-align:center; line-height:60px;">
  Najedź kursorem
</div>

<script>
const box = document.getElementById("box");

box.onmouseover = () => {
  box.style.background = "blue";
  box.textContent = "Jesteś nad elementem!";
};
</script>

Wyjaśnienie:

• onmouseover - wykrywa ruch myszy nad elementem.

• Funkcja zmienia kolor tła i tekst, aby użytkownik wiedział, że element jest aktywny.

4. onmouseout - reakcja na opuszczenie elementu

Zdarzenie onmouseout uruchamia się, gdy kursor opuszcza element.
Używa się go często razem z onmouseover do przywracania pierwotnego wyglądu elementu.

Przykład: Przywrócenie koloru po opuszczeniu

<div id="ramka" style="width:120px; height:60px; background:orange; text-align:center; line-height:60px;">
  Najedź i zejdź kursorem
</div>

<script>
const ramka = document.getElementById("ramka");

ramka.onmouseover = () => {
  ramka.style.background = "yellow";
  ramka.textContent = "Najechano!";
};

ramka.onmouseout = () => {
  ramka.style.background = "orange";
  ramka.textContent = "Najedź i zejdź kursorem";
};
</script>

Wyjaśnienie:

• onmouseover zmienia tło i tekst po najechaniu.

• onmouseout przywraca pierwotny wygląd po opuszczeniu elementu.

• Razem tworzą efekt interakcji wizualnej przy ruchu myszy.

Tabela podsumowująca zdarzenia myszy

Zadania - Operacje na elementach

createElement 1 – Dodawanie nowego akapitu po kliknięciu

Napisz skrypt, który po kliknięciu przycisku doda nowy akapit do strony.

<button onclick="dodajAkapit()">Dodaj akapit</button>
<div id="kontener"></div>

Polecenia:

• Pobierz element <div id="kontener">.

• Napisz funkcję dodajAkapit(), która:

  • utworzy nowy element <p> za pomocą createElement,

  • ustawi w nim dowolny tekst,

  • doda go do kontenera za pomocą appendChild().

Efekt:
Po każdym kliknięciu przycisku w kontenerze pojawia się nowy akapit.

createElement 2 - Lista zakupów tworzona z pola input

Napisz skrypt, który po wpisaniu tekstu w pole input i kliknięciu przycisku doda nowy element listy.

<input type="text" id="produkt" placeholder="Wpisz produkt">
<button onclick="dodajProdukt()">Dodaj</button>

<ul id="lista"></ul>

Polecenia:

• Pobierz elementy <input> oraz <ul>.

• Napisz funkcję dodajProdukt(), która:

  • pobierze tekst z inputa,

  • utworzy nowy element <li> za pomocą createElement,

  • wpisze do niego pobraną nazwę produktu,

  • doda go do listy,

  • wyczyści input.

Efekt:
Użytkownik wpisuje nazwę produktu, klika "Dodaj", a nowy element pojawia się na liście.

createElement 3 - Tworzenie kolorowych bloków

Napisz skrypt, który po kliknięciu przycisku utworzy nowy kolorowy kwadrat o losowym kolorze.

<button onclick="stworzBlok()">Dodaj blok</button>
<div id="pole"></div>

Polecenia:

• Pobierz element <div id="pole">.

• Napisz funkcję stworzBlok(), która:

  • utworzy nowy element <div>,

  • nada mu wymiary (np. 50×50 px),

  • ustawi losowy kolor tła (np. za pomocą #RRGGBB),

  • doda go do kontenera.

Efekt:
Każde kliknięcie przycisku tworzy nowy, losowo kolorowy kwadrat widoczny na stronie.

appendChild 1 - Dodawanie nowego elementu listy

Napisz skrypt, który po kliknięciu przycisku doda nowy element do listy.

<ul id="lista"></ul>
<button onclick="dodajElement()">Dodaj element</button>

Polecenia:

• Pobierz element <ul id="lista">.

• Napisz funkcję dodajElement(), która:

  • utworzy nowy element <li>,

  • ustawi w nim tekst, np. "Nowy element",

  • doda go do listy za pomocą appendChild().

Efekt:
Po każdym kliknięciu przycisku lista powiększa się o jeden nowy element.

appendChild 2 - Przenoszenie elementu do innego kontenera

Napisz skrypt, który po kliknięciu przycisku przeniesie istniejący element do drugiego kontenera.

<div id="A">
  <p id="tekst">Ten element zostanie przeniesiony</p>
</div>

<div id="B"></div>

<button onclick="przenies()">Przenieś element</button>

Polecenia:

• Pobierz oba kontenery <div id="A"> i <div id="B">.

• Pobierz element <p id="tekst">.

• Napisz funkcję przenies(), która:

  • wykona appendChild(tekst) na kontenerze B,

  • przeniesie tym samym element z kontenera A do B.

Efekt:
Po kliknięciu element znika z pierwszego kontenera i pojawia się w drugim.

appendChild 3 - Tworzenie galerii obrazów

Napisz skrypt, który po kliknięciu przycisku doda miniaturę obrazka do galerii.

<button onclick="dodajObraz()">Dodaj obrazek</button>
<div id="galeria"></div>

Polecenia:

• Pobierz element <div id="galeria">.

• Napisz funkcję dodajObraz(), która:

  • utworzy nowy element <img>,

  • ustawi mu src, np. "https://via.placeholder.com/100",

  • nada mu szerokość 100 px,

  • doda obrazek do galerii za pomocą appendChild().

Efekt:
Po każdym kliknięciu w galerii pojawia się kolejny mały obrazek.

removeChild 1 - Usuwanie pierwszego elementu listy

Napisz skrypt, który po kliknięciu przycisku usunie pierwszy element listy.

<ul id="lista">
  <li>Jabłko</li>
  <li>Gruszka</li>
  <li>Banan</li>
</ul>

<button onclick="usunPierwszy()">Usuń pierwszy element</button>

Polecenia:

• Pobierz element <ul id="lista">.

• Napisz funkcję usunPierwszy(), która:

  • sprawdzi, czy lista ma jakiekolwiek dzieci,

  • pobierze pierwszy element (lista.firstElementChild),

  • usunie go za pomocą removeChild().

Efekt:
Po każdym kliknięciu z listy znika pierwszy element.

removeChild 2 - Usuwanie klikniętego akapitu

Napisz skrypt, który umożliwi usuwanie akapitów po ich kliknięciu.

<div id="kontener">
  <p>Kliknij, aby mnie usunąć</p>
  <p>Kliknij, aby mnie usunąć</p>
  <p>Kliknij, aby mnie usunąć</p>
</div>

Polecenia:

• Pobierz element <div id="kontener">.

• Pobierz wszystkie akapity wewnątrz kontenera.

• Każdemu z nich ustaw zdarzenie onclick, np. removeParagraph().

• W funkcji usuń kliknięty element (np. this) za pomocą:

  • kontener.removeChild(this).

Efekt:
Po kliknięciu dany akapit natychmiast znika z kontenera.

removeChild 3 - Usuwanie wybranego elementu z listy rozwijanej

Napisz skrypt, który usunie element listy na podstawie wyboru w polu <select>.

<select id="wybor">
  <option>Element 1</option>
  <option>Element 2</option>
  <option>Element 3</option>
</select>

<button onclick="usunWybrany()">Usuń wybrany element</button>

Polecenia:

• Pobierz element <select id="wybor">.

• Napisz funkcję usunWybrany(), która:

  • pobierze numer wybranego elementu (selectedIndex),

  • jeśli index jest poprawny, pobierze odpowiedni <option>,

  • usunie go ze selecta za pomocą removeChild().

Efekt:
Po wyborze opcji z listy i kliknięciu przycisku wybrany element znika z listy rozwijanej.

replaceChild 1 - Zamiana akapitu na nowy tekst

Napisz skrypt, który po kliknięciu przycisku podmieni treść akapitu na nowy.

<p id="tekst">To jest stary tekst.</p>
<button onclick="zamienTekst()">Zamień tekst</button>

Polecenia:

• Pobierz element <p id="tekst">.

• Pobierz jego rodzica (np. document.body lub kontener, jeśli jest w nim umieszczony).

• Napisz funkcję zamienTekst(), która:

  • utworzy nowy element <p>,

  • wpisze do niego nowy tekst,

  • użyje replaceChild(), aby podmienić stary akapit na nowy.

Efekt:
Po kliknięciu stary akapit zostaje całkowicie zastąpiony nowym.

replaceChild 2 - Podmiana obrazka w galerii

Napisz skrypt, który po kliknięciu podmieni miniaturę na inny obrazek.

<div id="galeria">
  <img id="miniatura" src="https://via.placeholder.com/100">
</div>

<button onclick="podmienObraz()">Podmień obrazek</button>

Polecenia:

• Pobierz element <div id="galeria">.

• Pobierz obrazek <img id="miniatura">.

• Napisz funkcję podmienObraz(), która:

  • stworzy nowy element <img>,

  • ustawi mu nowe źródło, np. "https://via.placeholder.com/100/0000FF",

  • użyje replaceChild(), aby zamienić stary obraz na nowy.

Efekt:
Po kliknięciu miniatura zmienia się na inny obrazek.

replaceChild 3 - Dynamiczna zmiana elementu listy na pole input

Napisz skrypt, w którym kliknięcie elementu listy zamieni go na pole tekstowe.

<ul id="lista">
  <li>Kliknij, aby edytować</li>
  <li>Kliknij, aby edytować</li>
  <li>Kliknij, aby edytować</li>
</ul>

Polecenia:

• Pobierz element <ul id="lista">.

• Pobierz wszystkie <li> i każdemu ustaw onclick.

• W funkcji obsługującej kliknięcie:

  • utwórz nowy <input type="text">,

  • ustaw w nim wartość równą tekstowi klikniętego <li>,

  • pobierz rodzica klikniętego elementu (ul),

  • użyj replaceChild(), aby podmienić <li> na <input>.

Efekt:
Po kliknięciu element listy zamienia się na pole tekstowe, które użytkownik może edytować.

document.write 1 - Wyświetlanie tekstu po kliknięciu przycisku

Napisz skrypt, który po kliknięciu przycisku wyświetli tekst na stronie za pomocą document.write().

<button onclick="wyswietl()">Wyświetl tekst</button>

Polecenia:

• Napisz funkcję wyswietl(), która:

  • użyje document.write() do wypisania tekstu, np. "Witaj na stronie!".

• Pamiętaj, że document.write zastępuje całą zawartość dokumentu po załadowaniu strony.

Efekt:
Po kliknięciu cały dokument zostaje zastąpiony wyświetlonym tekstem.

document.write 2 - Wyświetlanie wyników obliczeń

Napisz skrypt, który po kliknięciu przycisku obliczy sumę dwóch liczb i wypisze wynik przy użyciu document.write().

<button onclick="oblicz()">Oblicz sumę</button>

Polecenia:

• Napisz funkcję oblicz(), która:

  • policzy sumę dwóch liczb, np. 5 + 7,

  • użyje document.write(), aby wyświetlić wynik w formacie: „Wynik: 12”.

• Zwróć uwagę, że po użyciu document.write stracisz dostęp do pierwotnego DOM-u.

Efekt:
Po kliknięciu na ekranie pojawia się tylko wynik obliczeń.

document.write 3 - Generowanie listy z pętli

Napisz skrypt, który po kliknięciu przycisku stworzy i wyświetli listę liczb od 1 do 5.

<button onclick="generujListe()">Generuj listę</button>

Polecenia:

• Napisz funkcję generujListe(), która:

  • rozpocznie wypisywanie listy od znacznika <ul>,

  • w pętli od 1 do 5 wypisze elementy <li> z numerami,

  • zakończy listę znacznikiem </ul>,

  • do wszystkich wypisań użyje document.write().

• Pamiętaj, że wykonanie document.write zastąpi całą stronę nową zawartością.

Efekt:
Po kliknięciu na ekranie wyświetla się nowa, wygenerowana lista liczb.

addEventListener 1 - Zliczanie kliknięć przycisku

Napisz skrypt, który będzie zliczał liczbę kliknięć przycisku i wyświetlał wynik.

<p>Liczba kliknięć: <span id="licznik">0</span></p>
<button id="przycisk">Kliknij mnie</button>

Polecenia:

• Pobierz element <button> o identyfikatorze przycisk.

• Pobierz element <span> o identyfikatorze licznik.

• Dodaj nasłuchiwacz zdarzenia click przy użyciu addEventListener, który zwiększa wartość licznika o 1 i aktualizuje tekst w <span>.

Efekt:
Za każdym kliknięciem przycisku liczba w <span> rośnie o 1.

addEventListener 2 - Zmiana koloru tekstu po kliknięciu

Napisz skrypt, który zmieni kolor tekstu nagłówka po kliknięciu.

<h2 id="naglowek">Kliknij, aby zmienić kolor</h2>
<button id="kolorBtn">Zmień kolor</button>

Polecenia:

• Pobierz elementy o identyfikatorach naglowek i kolorBtn.

• Dodaj nasłuchiwacz zdarzenia click przy użyciu addEventListener, który zmienia kolor tekstu nagłówka na czerwony (style.color = "red").

Efekt:
Po kliknięciu przycisku nagłówek zmienia kolor tekstu na czerwony.

addEventListener 3 - Zmiana rozmiaru kwadratu po kliknięciu

Napisz skrypt, który powiększy kwadrat po kliknięciu.

<div id="kwadrat" style="width:100px; height:100px; background-color:orange;"></div>
<button id="powieksz">Powiększ kwadrat</button>

Polecenia:

• Pobierz elementy kwadrat i powieksz.

• Dodaj nasłuchiwacz zdarzenia click przy użyciu addEventListener, który zwiększa width i height kwadratu o 20px.

Efekt:
Po kliknięciu przycisku kwadrat staje się większy.