jQuery - dynamiczne tworzenie elementów strony

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 4278 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:

const button = document.createElement("BUTTON"); // tworzę przycisk button.appendChild(document.createTextNode("Przycisk")); // dodaję mu text button.id = "old_style_made_button"; // nadaję mu identyfikator button.style.marginBottom = "10px"; // nadaję mu styl dolnego marginesu button.onclick = function(){ // przypisuję funkcję, która uruchomi się po jego kliknięciu alert("Kliknąłeś przycisk utworzony w czystym JavaScript"); } document.getElementById("jquery-01").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:

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

Rezultat działania powyższego skryptu:

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

const button = $("<button>"); button.attr("id", "jqery_style_made_button"); button.text("Przycisk") button.css("margin-bottom", "10px"); button.click( function(){ alert("Kliknąłeś przycisk utworzony za pomocą jQuery"); }); $("#jquery-01").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.