Lekcja 5: Manipulacja DOM - Dodawanie, Usuwanie i Zastępowanie Elementów

Oprócz modyfikowania treści i atrybutów istniejących elementów, jQuery dostarcza intuicyjnych metod do dynamicznego dodawania nowych elementów do DOM, usuwania istniejących oraz zastępowania jednych elementów innymi. To kluczowe umiejętności przy tworzeniu interaktywnych interfejsów użytkownika.

Dodawanie Elementów

Metody te pozwalają wstawiać nową treść (HTML, elementy DOM, obiekty jQuery) w różnych miejscach względem wybranych elementów.

• .append(treść): Wstawia treść na końcu wewnętrznej zawartości każdego z wybranych elementów.

  // Dodanie nowego elementu listy na końcu ul
  $("ul#lista-produktow").append("<li>Nowy produkt</li>");
  
  // Dodanie spana do wszystkich paragrafów
  $("p").append(" <span class=\'dodatek\'>(dodano)</span>");

• .appendTo(cel): Działa odwrotnie do .append(). Wstawia wybrane elementy na końcu wewnętrznej zawartości elementu(ów) podanych jako cel.

  // Stworzenie nowego elementu i dodanie go do diva
  $("<p>Nowy akapit dodany przez appendTo.</p>").appendTo("#kontener");
  
  // Przeniesienie istniejących elementów
  $("span.ikona").appendTo("div.naglowek"); // Przenosi ikony do nagłówka

• .prepend(treść): Wstawia treść na początku wewnętrznej zawartości każdego z wybranych elementów.

  // Dodanie elementu na początku listy
  $("ul#lista-zadan").prepend("<li class=\'priorytet\'>Najważniejsze zadanie!</li>");

• .prependTo(cel): Działa odwrotnie do .prepend(). Wstawia wybrane elementy na początku wewnętrznej zawartości elementu(ów) podanych jako cel.

  $("<h2>Ważna sekcja</h2>").prependTo("article#glowny");

• .after(treść): Wstawia treść bezpośrednio po każdym z wybranych elementów (jako rodzeństwo).

  // Dodanie paragrafu po każdym obrazku
  $("img").after("<p class=\'podpis-obrazka\'>Podpis pod obrazkiem.</p>");

• .insertAfter(cel): Działa odwrotnie do .after(). Wstawia wybrane elementy bezpośrednio po elemencie(ach) podanych jako cel.

  $("<hr>").insertAfter("h1"); // Wstawia linię poziomą po każdym h1

• .before(treść): Wstawia treść bezpośrednio przed każdym z wybranych elementów (jako rodzeństwo).

  // Dodanie nagłówka przed każdą sekcją
  $("section").before("<h2>Nowa Sekcja</h2>");

• .insertBefore(cel): Działa odwrotnie do .before(). Wstawia wybrane elementy bezpośrednio przed elementem(ami) podanymi jako cel.

  $("<div class=\'reklama\'>Reklama</div>").insertBefore("#stopka");

Argumenty treść i cel mogą być stringiem HTML, elementem DOM, tablicą elementów DOM lub obiektem jQuery.

Usuwanie Elementów

• .remove(selektor): Usuwa wybrane elementy (wraz ze wszystkimi potomkami i powiązanymi danymi/zdarzeniami jQuery) z drzewa DOM. Można opcjonalnie podać selektor, aby usunąć tylko te elementy ze zbioru, które pasują do selektora.

  // Usunięcie elementu o ID "do-usuniecia"
  $("#do-usuniecia").remove();
  
  // Usunięcie wszystkich paragrafów z klasą "stary"
  $("p").remove(".stary");
  
  // Usunięcie wszystkich elementów li
  $("li").remove();

• .detach(selektor): Działa podobnie do .remove(), ale zachowuje wszystkie dane i zdarzenia powiązane z usuniętymi elementami przez jQuery. Jest to przydatne, jeśli planujesz później ponownie wstawić te elementy do DOM.

  let odlaczoneElementy = $(".tymczasowe").detach();
  // ... wykonaj inne operacje ...
  $("#nowe-miejsce").append(odlaczoneElementy); // Ponowne wstawienie z zachowanymi danymi/zdarzeniami

• .empty(): Usuwa wszystkie dzieci (potomków) każdego z wybranych elementów, ale pozostawia same wybrane elementy. Skutecznie opróżnia element z zawartości.

  // Opróżnienie diva z zawartości
  $("#kontener").empty();
  
  // Usunięcie wszystkich opcji z listy select
  $("select#kategorie").empty();

Zastępowanie Elementów

• .replaceWith(nowaTreść): Zastępuje każdy z wybranych elementów podaną nowąTreścią (string HTML, element DOM, obiekt jQuery). Usunięte elementy są zwracane przez metodę.

  // Zastąpienie wszystkich paragrafów nagłówkami h3
  $("p").replaceWith("<h3>Zastąpiony paragraf</h3>");
  
  // Zastąpienie diva innym, istniejącym elementem
  let istniejacyDiv = $("#inny-div");
  $("#stary-div").replaceWith(istniejacyDiv); // #inny-div zostanie przeniesiony

• .replaceAll(cel): Działa odwrotnie do .replaceWith(). Zastępuje element(y) podane jako cel wybranymi elementami.

  // Zastąpienie wszystkich elementów .placeholder nowym divem
  $("<div class=\'finalna-tresc\'>Finalna treść</div>").replaceAll(".placeholder");

Owijanie Elementów (Wrapping)

Metody te pozwalają opakować wybrane elementy w dodatkową strukturę HTML.

• .wrap(strukturaHTML | element | funkcja): Owpakowuje każdy wybrany element indywidualnie w podaną strukturę.

  // Opakowanie każdego linku w element strong
  $("a").wrap("<strong></strong>");
  
  // Opakowanie każdego inputa w div z klasą
  $("input").wrap("<div class=\'input-wrapper\'></div>");

• .unwrap(): Usuwa rodzica każdego z wybranych elementów, effectively "rozpakowując" je.

  // Usunięcie opakowującego <strong> z linków
  $("a").unwrap();

• .wrapAll(strukturaHTML | element): Opakowuje wszystkie wybrane elementy razem, jako grupę, w pojedynczą strukturę.

  // Opakowanie wszystkich paragrafów w jeden div
  $("p").wrapAll("<div class=\'kontener-paragrafow\'></div>");

• .wrapInner(strukturaHTML | element | funkcja): Opakowuje wewnętrzną zawartość (dzieci) każdego wybranego elementu w podaną strukturę.

  // Opakowanie treści każdego diva w span
  $("div").wrapInner("<span class=\'tresc-wewnetrzna\'></span>");

<!DOCTYPE html>
<html>
<head>
    <title>Test Dodawania/Usuwania</title>
    <style>
        .lista-wrapper { border: 1px solid blue; padding: 10px; margin-top: 10px; }
    </style>
</head>
<body>
    <button id="dodaj">Dodaj Punkt</button>
    <button id="usun-ostatni">Usuń Ostatni</button>

    <ul id="lista">
        <li>Punkt 1</li>
        <li>Punkt 2</li>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function() {
            // 3. Opakuj listę w div
            $("#lista").wrap("<div class=\'lista-wrapper\'></div>");
            console.log("Opakowano listę.");

            // 4. Dodaj nagłówek przed listą (teraz przed wrapperem)
            $(".lista-wrapper").before("<h3>Moja Lista</h3>");
            console.log("Dodano nagłówek.");

            // 1. Obsługa kliknięcia przycisku "Dodaj Punkt"
            $("#dodaj").on("click", function() {
                $("#lista").append("<li>Nowy Punkt</li>");
                console.log("Dodano nowy punkt.");
            });

            // 2. Obsługa kliknięcia przycisku "Usuń Ostatni"
            $("#usun-ostatni").on("click", function() {
                // Sprawdź, czy są jakieś elementy li do usunięcia
                if ($("#lista li").length > 0) {
                    $("#lista li:last").remove();
                    console.log("Usunięto ostatni punkt.");
                } else {
                    console.log("Lista jest już pusta.");
                }
            });
        });
    </script>
</body>
</html>