jQuery - dynamiczne tworzenie elementów strony

Stronę tą wyświetlono już: 181 razy

Dzięki jQuery proces dynamicznego tworzenia nowych elementów strony dużo przyjaźniejszy aniżeli w czystym JavaScript. Oto prosty przykład utworzenia przycisku w starym stylu:

Listing 1
  1. var button = document.createElement("BUTTON"); // tworzę przycisk
  2. button.appendChild(document.createTextNode("Przycisk")); // dodaję mu text
  3. button.id = "old_style_made_button"; // nadaję mu identyfikator
  4. button.style.marginBottom = "10px"; // nadaję mu styl dolnego marginesu
  5. button.onclick = function(){ // przypisuję funkcję, która uruchomi się po jego kliknięciu
  6. alert("Kliknąłeś przycisk utworzony w czystym JavaScript");
  7. }
  8. document.getElementById("strona").appendChild(button); // i dopiero teraz dodaję go do mojej strony

Wynik działania powyższego kodu:

A teraz to samo, tylko z udziałem jQuery:

Listing 2
  1. // I tutaj zaczyna się tworzenie przycisku z nadaniem mu identyfikatora, tekstu, stylu marginesu oraz podpięciem funkcji
  2. var button = $("<button>").attr("id", "jqery_style_made_button").text("Przycisk").css("margin-bottom", "10px").click( function(){
  3. alert("Kliknąłeś przycisk utworzony za pomocą jQuery");
  4. });
  5. $("#strona").append(button); // a tutaj dodaję przycisk do DOM

Rezultat działania powyższego skryptu:

Powyższy skrypt można również nieco rozpisać:

Listing 3
  1. var button = $("<button>");
  2. button.attr("id", "jqery_style_made_button");
  3. button.text("Przycisk")
  4. button.css("margin-bottom", "10px");
  5. button.click( function(){
  6. alert("Kliknąłeś przycisk utworzony za pomocą jQuery");
  7. });
  8. $("#strona").append(button);

Jednak myślę, że jest to zbyteczne.

W ten sposób można dodawać w dynamiczny sposób różne elementy na stronie. Dodatkowo ma się tutaj dostęp do zmiennej reprezentującej dany element strony, dzięki czemu można zmieniać style i atrybuty tego obiektu w kodzie bez konieczności wyciągania elementu z DOM.

Komentarze