Dodawanie elementów jQuery

Dzięki jQuery można łatwo dodawać nowe elementy/zawartość.

Dodawanie nowego HTML

Nauczymy się czterech metod jQuery do dodawania nowej zawartości:

  • append() - Wstawianie zawartości na końcu wybranego elementu
  • prepend() - Wstawianie zawartości na początku wybranego elementu
  • after() - Wstawianie zawartości za wybranym elementem
  • before() - Wstawianie zawartości przed wybranym elementem

Metoda append() jQuery

Metoda append() jQuery wstawia zawartość na końcu wybranego elementu.

Przykład

$("p").append("Some appended text.");

Spróbuj sam

Metoda prepend() jQuery

Metoda prepend() jQuery wstawia zawartość na początku wybranego elementu.

Przykład

$("p").prepend("Some prepended text.");

Spróbuj sam

Dodawanie kilku nowych elementów za pomocą append() i prepend()

W powyższym przykładzie wstawiamy tekst/HTML tylko na początku/koniec wybranych elementów.

Metody append() i prepend() mogą przyjmować nieskończoną liczbę nowych elementów. Możemy generować tekst/HTML za pomocą jQuery (jak w powyższym przykładzie), lub za pomocą kodu JavaScript i elementów DOM.

W poniższym przykładzie tworzymy kilka nowych elementów. Możemy je utworzyć za pomocą text/HTML, jQuery lub JavaScript/DOM, a następnie dodać je do tekstu za pomocą metody append() (dla prepend() również)

Przykład

function appendText()
{
var txt1="<p>Text.</p>";               // Utworzenie nowego elementu za pomocą HTML
var txt2=$("<p></p>").text("Text.");   // Utworzenie nowego elementu za pomocą jQuery
var txt3=document.createElement("p");  // Utwórz nowy element za pomocą DOM
txt3.innerHTML="Tekst.";
$("p").append(txt1,txt2,txt3);         // Dodaj nowe elementy
{}

Spróbuj sam

Metody after() i before() jQuery

Metoda after() jQuery wstawia zawartość za wybranym elementem.

Metoda before() jQuery wstawia zawartość przed wybranym elementem.

Przykład

$("img").after("Nieco tekstu po");
$("img").before("Nieco tekstu przed");

Spróbuj sam

Dodawanie kilku nowych elementów za pomocą metod after() i before()

Metody after() i before() mogą przyjmować nieskończoną liczbę nowych elementów. Nowe elementy można utworzyć za pomocą text/HTML, jQuery lub JavaScript/DOM.

W poniższym przykładzie tworzymy kilka nowych elementów. Te elementy można utworzyć za pomocą text/HTML, jQuery lub JavaScript/DOM. Następnie wstawiamy te nowe elementy do tekstu za pomocą metody after() (podobnie działa metoda before()):

Przykład

function afterText()
{
var txt1="<b>I </b>";                    // Utwórz nowy element za pomocą HTML
var txt2=$("<i></i>").text("miłość ");     // Utwórz nowy element za pomocą jQuery
var txt3=document.createElement("big");  // Utwórz nowy element za pomocą DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Wstaw nowy element po img
{}

Spróbuj sam

Podręcznik referencyjny jQuery HTML

Aby uzyskać pełną treść metod HTML jQuery, odwiedź poniższy podręcznik: