Najnowsze tutoriale tworzenie stron internetowych
 

jQuery - Dodawanie elementów

❮ Poprzedni Następny Rozdział ❯

Z jQuery, łatwo jest dodać nowe elementy / treści.

Dodaj zawartość Nowe HTML

Będziemy patrzeć na czterech metod jQuery, które są używane, aby dodać nową treść:

  • append() - zawartość wstawki w końcu wybranych pierwiastków
  • prepend() - zawartość Płytki na początku wybranych pierwiastków
  • after() - Wstawia zawartość po wybranych elementów
  • before() - zawartości Wstawki przed wybranymi elementami

jQuery append() Metoda

JQuery append() metoda wstawia zawartość na końcu wybranych elementów HTML.

Przykład

$("p").append("Some appended text.");
Spróbuj sam "

jQuery prepend() Metoda

JQuery prepend() metoda wstawia zawartość na początku wybranych elementów HTML.

Przykład

$("p").prepend("Some prepended text.");
Spróbuj sam "

Dodać kilka nowych elementów w append() i prepend()

W obu powyższych przykładach, mamy tylko trochę wstawiony text / html na początku / końca wybranych elementów HTML.

Jednak zarówno append() i prepend() metody może trwać nieskończenie wiele nowych elementów jako parametrów. Nowe elementy mogą być generowane z text / html (jak zrobiliśmy w powyższych przykładach), z jQuery, albo z kodu JavaScript i elementów DOM.

W poniższym przykładzie, tworzymy kilka nowych elementów. Elementy są tworzone z text / html, jQuery i JavaScript / DOM. Następnie dodajemy nowe elementy do tekstu z append() metody (byłoby to pracował dla prepend() zbyt):

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.";
    $("p").append(txt1, txt2, txt3);         // Append the new elements
}
Spróbuj sam "

jQuery after() , a before() Metod

JQuery after() metoda wstawia zawartość po wybranym elementów HTML.

JQuery before() metoda wstawia zawartość przed wybranymi elementami HTML.

Przykład

$("img").after("Some text after");

$("img").before("Some text before");
Spróbuj sam "

Dodać kilka nowych elementów w after() , a before()

Ponadto, zarówno after() i before() metody mogą nieskończoną liczbę nowych elementów parametrów. Nowe elementy mogą być generowane z text / html (jak zrobiliśmy w powyższym przykładzie), z jQuery, albo z kodu JavaScript i elementów DOM.

W poniższym przykładzie, tworzymy kilka nowych elementów. Elementy są tworzone z text / html, jQuery i JavaScript / DOM. Następnie wstawiamy nowe elementy do tekstu z after() metoda (byłoby to pracował before() zbyt):

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>
}
Spróbuj sam "

Sprawdź się z ćwiczeń!

Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4»

jQuery HTML Reference

Aby uzyskać pełny przegląd wszystkich metod jQuery HTML, przejdź do naszej jQuery HTML / CSS .


❮ Poprzedni Następny Rozdział ❯