jQuery - Dodaj elementy
Dzięki jQuery łatwo jest dodawać nowe elementy/treści.
Dodaj nową zawartość HTML
Przyjrzymy się czterem metodom jQuery, które służą do dodawania nowej treści:
append()- Wstawia zawartość na końcu wybranych elementówprepend()- Wstawia zawartość na początku wybranych elementówafter()- Wstawia zawartość po wybranych elementachbefore()- Wstawia zawartość przed wybranymi elementami
jQuery append() Metoda
Metoda jQuery append()wstawia zawartość NA KOŃCU wybranych elementów HTML.
Przykład
$("p").append("Some appended text.");
jQuery prepend() Metoda
Metoda jQuery prepend()wstawia zawartość NA POCZĄTKU wybranych elementów HTML.
Przykład
$("p").prepend("Some prepended text.");
Dodaj kilka nowych elementów za pomocą append() i prepend()
W obu powyższych przykładach wstawiliśmy tylko trochę tekstu/HTML na początku/końcu wybranych elementów HTML.
Jednak obie metody append()i prepend()mogą przyjmować jako parametry nieskończoną liczbę nowych elementów. Nowe elementy można wygenerować za pomocą tekstu/HTML (tak jak zrobiliśmy to w powyższych przykładach), za pomocą jQuery lub za pomocą kodu JavaScript i elementów DOM.
W poniższym przykładzie tworzymy kilka nowych elementów. Elementy są tworzone za pomocą text/HTML, jQuery i JavaScript/DOM. Następnie dołączamy nowe elementy do tekstu append()metodą (to też by zadziałało
prepend()) :
Przykład
function appendText()
{
var txt1 = "<p>Text.</p>";
// Create element with HTML
var txt2 = $("<p></p>").text("Text."); // Create with jQuery
var txt3 = document.createElement("p"); // Create with DOM
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}
jQuery after() i before() Metody
Metoda jQuery after()wstawia zawartość PO wybranych elementach HTML.
Metoda jQuery before()wstawia treść PRZED wybranymi elementami HTML.
Przykład
$("img").after("Some text after");
$("img").before("Some text before");
Dodaj kilka nowych elementów za pomocą after() i before()
Ponadto obie metody after()i before()mogą przyjmować jako parametry nieskończoną liczbę nowych elementów. Nowe elementy można wygenerować za pomocą tekstu/HTML (tak jak zrobiliśmy to w powyższym przykładzie), za pomocą jQuery lub za pomocą kodu JavaScript i elementów DOM.
W poniższym przykładzie tworzymy kilka nowych elementów. Elementy są tworzone za pomocą text/HTML, jQuery i JavaScript/DOM. Następnie wstawiamy nowe elementy do tekstu za pomocą after()metody (to też by zadziałało
before()) :
Przykład
function afterText()
{
var txt1 = "<b>I </b>";
// Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3);
// Insert new elements after <img>
}
Ćwiczenia z jQuery
Dokumentacja HTML jQuery
Aby uzyskać pełny przegląd wszystkich metod jQuery HTML, przejdź do naszego jQuery HTML/CSS Reference .