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